Question

我想根据另一个下拉列表的选择过滤选项列表。

请参阅下面的jquery代码;我确信有一点我错过了，这就是它无法正常工作的原因。

if($('#selectionone').is(':selected')){
    $('option').filter('.edibles');   

}
if($('selectiontwo').is(':selected')){
  $('option').filter('.vegfats');
}

Here is the jsfiddle link

Answer 1

以下是我根据所选选项添加/删除选项的方法，这在大多数浏览器中都有效。

我通过将类添加到第一个选择选项（如

）来修改html

<option class="edibles" value="Edible Oils" id="selectionone">Edible Oils</option>
<option class="vegfats" value="Vegetable Cooking Fats" id="selectiontwo">Vegetable Cooking Fats</option>

<强> JS：

$(document).ready(function () {    
    var allOptions = $('#selectprod option')
    $('#selectcat').change(function () {
        $('#selectprod option').remove(); //remove all options
        var classN = $('#selectcat option:selected').prop('class'); //get the 
        var opts = allOptions.filter('.' + classN); //selected option's classname
        $.each(opts, function (i, j) {
            $(j).appendTo('#selectprod'); //append those options back
        });
    });
});

JSFiddle

Answer 2

你可以这样做：

$(document).ready(function () {
    $('#selectcat').change(function () {
        $('#selectprod option').show();
        if ($('option:selected', this).attr('id') == 'selectionone') {
            $('#selectprod option.edibles').hide();
        }
        if ($('option:selected', this).attr('id') == 'selectiontwo') {
            $('#selectprod option.vegfats').hide();
        }
    });
});

<强> jsFiddle example

由于这可能不适用于旧版本的IE，因此您可以将$('#selectprod option').show();替换为$('#selectprod option').prop('disabled',false);，将$('#selectprod option.vegfats').hide();替换为$('#selectprod option.vegfats').prop('disabled',true);

Answer 3

这是一个解决问题的简单方法，应该是相当可靠的：

<select class="masterSelect">
    <option value="0">Fiat</option>
    <option value="1">Opel</option>
    <option value="2">Porsche</option>
</select>

<div class="hiddenOptions">
    <select>
        <option value="1">Punto</option>
        <option value="2">Mani</option>
        <option value="3">Pierri 203</option>
    </select>

    <select>
        <option value="4">Elysis</option>
        <option value="5">201</option>
        <option value="6">Mido</option>
    </select>

    <select>
        <option value="7">911</option>
        <option value="8">Macho</option>
        <option value="9">Vanguard</option>
    </select>
</div>

的CSS：

.hiddenOptions > select
{
   display: none;
}

.hiddenOptions > select.active
{
   display: inline-block;
}

JS：

$('.masterSelect').on('change', function() {
    $('.hiddenOptions select').removeClass("active");
    $('.hiddenOptions select').eq($(this).val()).addClass("active");

    showValue();
});

$('.hiddenOptions select').on('change', function() {
    showValue();
});

$('.masterSelect').trigger('change'); //set initial value on load

function showValue()
{
    console.log($('.hiddenOptions select.active').val());
}

https://jsfiddle.net/g5h2k6t4/1/

Answer 4

包括这两个链接以及 Praveen

提供的代码

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

过滤器类别根据另一个下拉选项选择下拉列表

4 个答案:

JSFiddle