Question

我有两种形式，每种形式都有一个选择字段和一些选项。第一个表单用作第二个表单的过滤器，但是当我在第一个表单中选择某个内容时，第二个表单更新正常，但所选选项仍然保留，即使它已被过滤掉。我该怎么解决这个问题？尝试选择：第一个孩子的方法，但它似乎不起作用。

这是我的代码到目前为止（我真的，真的是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>

Answer 1

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

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

Working example

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

1 个答案: