Question

我有两个下拉列表，如此

            <select required="required" name="firstselection" id="firstselection">
                <option value='0' disabled selected style='display:none;'>Please Choose</option>
                <option value="1">Hello</option>
                <option value="2">Goodbye</option>
            </select>

            <select required="required" name="secondselection" id="secondselection">
                <option value='0' disabled selected style='display:none;'>Please Choose</option>
                <option value='1'>Hi</option>
                <option value='1'>G'day</option>
                <option value='2'>Cya</option>
                <option value='2'>Later</option>
            </select>

我正在试图获得它，以便如果选择Hello选项，则仅显示第二个下拉值为1的选项。

$('select').on('change', function(){
                var firstselection = $('#firstselection').val();
                if(firstselection == 1){
                    $('#secondselection option').filter("[value='2']");
                };
            });

我无法让过滤器正常工作。如果我使用删除，我可以让它工作，但我不想删除它。

Answer 1

您需要remove filter个ed元素：

$('select').on('change', function () {
    var firstselection = $('#firstselection').val();
    if (firstselection == 1) {
        $('#secondselection option').filter("[value='2']").remove();
    }
});

小提琴：http://jsfiddle.net/N8TEu/

<小时/> 如果要再次显示选项，请使用以下命令：

$('select').on('change', function () {
    var firstselection = this.value;
    if (firstselection == 1) {
        $('#secondselection option[value="2"]').hide();
    }
    else if (firstselection == 2) {
        $('#secondselection option[value="2"]').show();
    }
});

小提琴：http://jsfiddle.net/N8TEu/2/

另请注意，您不需要.filter()的额外步骤。您可以在选择器中指定[value="2"]。

Answer 2

您可以使用

var $opts = $('#secondselection option:not([value="1"]):not(:disabled)');
$('#firstselection').on('change', function(){
    $opts.toggle(this.value != 1);
});

Demo

Answer 3

试试这个：

$('select#firstselection').on('change', function(){
    var value = $(this).val();
    if (value == '1') {
      $('select#secondselection option[value!=1]').hide();
    } else {
      $('select#secondselection option:not(:disabled)').show();
    }
});

根据值过滤jquery选项

3 个答案: