當我 select 類別使用 Javascript（國家/州/州）時更改選項

Question

當我在另一個國家/地區撥打 select 時，我試圖隱藏一些選項。 這些選項是這個國家的州。 但是，當我 select 國家時，它在子類別中沒有顯示任何內容。

<script>
    $('#profile-state').find('option').hide();
    $('#profile-country').change(function() {
        var $cat = $(this).find('option:selected');
        var $subCat = $('#profile-state').find('.' + $cat.attr('value'));
        $('#profile-state').find('option').not("'"+ '.' + $cat.attr('value') + "'").hide();
        $subCat.show();
        $subCat.find('option').first().attr('selected', 'selected');
    });
</script>

<div class="form-group field-profile-country required">
<label class="control-label" for="profile-country">País</label>
<select id="profile-country1" class="form-control" name="Profile[country]" aria-required="true">
<option value="">Selecione:</option>
<option value="United States">Estados Unidos</option>
<option value="Brazil">Brasil</option>
</select>
</div>

<div class="form-group field-profile-state required">
<label class="control-label" for="profile-state">Estado</label>
<select id="profile-statew" class="form-control" name="Profile[state]" aria-required="true">
<option value="">Selecione:</option>
<option value="Dont Say">Dont Say</option>
<option value="Unidade States 1">New Work</option>
<option value="Unidade States 2">Washington</option>
<option value="Brazil 1">Rio de Janeiro</option>
<option value="Brazil 2">São Paulo</option>
</select>
</div>

所以，我嘗試使用數字制作不同的值，因為我不能在我的應用程序中使用相同的值。 有人可以幫助我嗎？

Answer 1

您的代碼中有一些拼寫錯誤，例如子類別下拉列表中美國的拼寫錯誤等。我已將您的腳本更改為 select 只有那些以所選國家/地區名稱開頭的子類別選項使用（^）。

 $(document).ready(function() { $('#profile-state').find('option').hide(); $('#profile-country').change(function() { var $cat = $(this).find('option:selected'); console.log($cat); var $subCat = $("#profile-state").find('option[value^="'+$cat.attr('value')+' "]'); console.log($subCat); $('#profile-state option:selected').removeAttr('selected'); $('#profile-state').find('option').not('option[value^="'+$cat.attr('value')+' "]').hide(); $subCat.show(); $subCat.find('option').first().attr('selected', 'selected'); }); });

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div class="form-group field-profile-country required"> <label class="control-label" for="profile-country">País</label> <select id="profile-country" class="form-control" name="Profile[country]" aria-required="true"> <option value="">Selecione:</option> <option value="United States">Estados Unidos</option> <option value="Brazil">Brasil</option> </select> </div> <div class="form-group field-profile-state required"> <label class="control-label" for="profile-state">Estado</label> <select id="profile-state" class="form-control" name="Profile[state]" aria-required="true"> <option value="">Selecione:</option> <option value="Dont Say">Dont Say</option> <option value="United States 1">New Work</option> <option value="United States 2">Washington</option> <option value="Brazil 1">Rio de Janeiro</option> <option value="Brazil 2">São Paulo</option> </select> </div>

Answer 2

T.Shah 的回答按要求工作。 但是你也可以像這樣用更少的努力來做到這一點：

 $(document).ready(function() { const $cntr=$('#profile-country').change(function() { $("#profile-state option").each(function(){$(this).toggle(this.value.slice(0,5)==$cntr.val().slice(0,5)) }); }); });

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div class="form-group field-profile-country required"> <label class="control-label" for="profile-country">País</label> <select id="profile-country" class="form-control" name="Profile[country]" aria-required="true"> <option value="">Selecione:</option> <option value="United States">Estados Unidos</option> <option value="Brazil">Brasil</option> </select> </div> <div class="form-group field-profile-state required"> <label class="control-label" for="profile-state">Estado</label> <select id="profile-state" class="form-control" name="Profile[state]" aria-required="true"> <option value="">Selecione:</option> <option value="Dont Say">Dont Say</option> <option value="United States 1">New Work</option> <option value="United States 2">Washington</option> <option value="Brazil 1">Rio de Janeiro</option> <option value="Brazil 2">São Paulo</option> </select> </div>