应用过滤器时动态更新所选选项？

Posted 2023-05-09

【中文标题】应用过滤器时动态更新所选选项？

【英文标题】：Update selected option dynamically when filter is applied?

【发布时间】：2016-11-19 13:39:53

【问题描述】：

我有两个表单，每个表单都有一个选择字段和一些选项。第一个表单用作第二个表单的过滤器，但是当我在第一个表单中选择某些内容时，第二个表单更新正常，但所选选项仍然存在，即使它已被过滤掉。我该如何解决这个问题？尝试使用 option:first-child 方法，但它似乎不起作用。

到目前为止，这是我的代码（我对 jQuery 非常非常陌生）

<form action="select.php" method="post">
    <select name="color" id="color">
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="purple">Purple</option>
        <option value="orange">Orange</option>
    </select>
</form>

<form action="select.php" method="post">    
    <select name="character" id="character">
        <option value="leo" class="blue">Leo</option>
        <option value="smurf" class="blue">Smurf</option>
        <option value="thedevil" class="red">The Devil</option>
        <option value="raphael" class="red">Raphael</option>
        <option value="donnatello" class="purple">Donnatello</option>
        <option value="mike" class="orange">Mike</option>
    </select>   
</form>

<script>
    $('#color').change(function() 
        var myColor = $('#color option:selected').val();
        $('#character option').hide();
        $('#character option').filter("." + myColor).show();
        $('#character option:first-child').attr("selected", "selected");
    );    
</script>

【参考方案1】：

您需要将#character 选择的值设置为与过滤器匹配的第一个option，而不是选择中的第一个子项，因为它永远不会改变。试试这个：

$('#color').change(function() 
    var myColor = $('#color').val();
    $('#character option').hide().filter("." + myColor).show().first().prop("selected", true);
).change();

Working example