1

これは単純な構文の問題だと思います。州のリストと都市のリストがあります。ユーザーが状態を選択したら、Jquery を使用して、選択された状態のオプション以外のすべてのオプションを削除したいと考えています。

脚本：

<script>
$(function(){
$('#state').change(function(){
    var selstate = $('#state:selected').text();
    $('.city:not(#'+selstate+')').remove();

});
});

</script>

HTML:

<select id="state" name='State'> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option>
</select>

<select id="city" name='City'> 
    <option class="AL" value="City A">City A</option>
        <option class="AL" value="City B">City B</option>
    <option class="AK" value="City C">City C</option>
    <option class="AK" value="City D">City D</option>
</select>
4

1 に答える 1

3

これを試して：-

$(function () {
    $('#state').change(function () {
        var selstate = $(this).val();
        $('#city option').not('.' + selstate).remove();
    });
});

本当にオプションを削除したいのかわかりません。おそらく無効にする方が良いでしょう。

デモ

$(function () {
    $('#state').change(function () {
        var selstate = $(this).val();
        $('#city option').prop('disabled', false).not('.' + selstate).prop('disabled',true);
        $('#city option').not('[disabled]').eq(0).prop('selected',true); 
        // Clear current selection to the first city for the new state
    });
});

非表示と表示のオプションを更新します (すべてのブラウザーでは機能しません):-

不要なドロップダウンを削除する代わりに非表示にします:-

デモ

脚本

$(function () {
    $('#state').change(function () {
         var selstate = $(this).val();
         $('#city option').addClass('hidden');
         $('#city option.hidden').not('.' + selstate).removeClass('hidden');
         $('#city option').not('.hidden').eq(0).prop('selected',true);
     });
});

CSS

.hidden
{
    display:none;
}

更新 2:- オプションをデータとして保存し、選択を再構築します。

デモ

$(function(){

    $('#state').data('city', $('#city option'));//Store the options initially in data.

    $(function () {
        $('#state').change(function () {
             var selstate = $(this).val();
             var options = $(this).data('city');
               $('#city').html(options.filter(function(){return this.className === selstate}));
         });
    });
});
于 2013-05-20T00:53:39.413 に答える