如何从另一个选择列表更改选择列表选项？

Question

我有两个选择器。我想从第一个选择列表中过滤第二个选择列表选项。

代码如下：

$(document).ready(function() {
    $('#sehir').change(function() {
        var sehir = $(this).find('option:selected').text();
        var options = $('#ilce').filter('[label=' + sehir + ']');
        $('#ilce').html(options);
    });
});

还有第一个选择列表：

<select name="sehirid" id="sehir" class="form-control">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

第二个选择列表：

<select name="ilceid" id="ilce" class="form-control">
    <optgroup label="Option 1">
        <option parent="Option 1" value="1">Option 1</option>
        <option parent="Option 1" value="2">Option 2</option>
        <option parent="Option 1" value="3">Option 3</option>
    </optgroup>
    <optgroup label="Option 2">
        <option parent="Option 2" value="1">Option 1</option>
        <option parent="Option 2" value="2">Option 2</option>
        <option parent="Option 2" value="3">Option 3</option>
    </optgroup>
    <optgroup label="Option 3">
        <option parent="Option 3" value="1">Option 1</option>
        <option parent="Option 3" value="2">Option 2</option>
        <option parent="Option 3" value="3">Option 3</option>
    </optgroup>
</select>

但是这段代码不起作用。怎么了？

Answer 1

两个问题；首先filter() 应该是find()，因为您正在搜索#ilce 元素的子元素。其次，您需要将属性选择器中的值用引号括起来。试试这个：

$('#sehir').change(function() {
    var sehir = $(this).find('option:selected').text();
    var options = $('#ilce').find('optgroup[label="' + sehir + '"]');
    $('#ilce').html(options);
});

Example fiddle

请注意，这只会一次起作用，因为您会在第一次选择后删除其他选项组。如果您希望能够更改选择，您可以禁用其他 optgroup 元素，如下所示：

$('#sehir').change(function() {
    var sehir = $(this).find('option:selected').text();
    var optgroup = $('#ilce').find('optgroup[label="' + sehir + '"]');
    $('#ilce').find('optgroup').prop('disabled', false).not(optgroup).prop('disabled', true);
});

Example fiddle

Answer 2

您想查找特定组下的所有选项。这可以通过以下方式实现：

var options = $('optgroup[label="' + sehir + '"]').find('option');