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');

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

2 个答案: