使用jQuery根据第一个选择列表选项更改第二个选择列表

Question

我有两个选择：

<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>

如果我首先选择“水果”，该如何使用jQuery？第二个选择仅向我显示水果-香蕉，苹果，橙子。如果我在第一个选择中选择“鸟”，则第二个选择仅向我显示“鸟”-老鹰，鹰。依此类推...

我试图用这段jQuery代码来做到这一点：

$("#select1").change(function() {
    var id = $(this).val();
    $('#select2 option[value!='+id+']').remove();
});

不幸的是，它几乎删除了所有内容，而且我不知道如何恢复某些选项。我也阅读了一些有关克隆的内容，但在这种情况下我不知道如何使用它。

Answer 1

Answer 2

我想使用单独的JSON文件中的$ .getJSON（）版本。

Answer 3

将所有#select2的选项存储在变量中，根据#select1中所选选项的值对其进行过滤，然后使用.html()中的#select2进行设置：

Answer 4

我以sabithpocker的想法为基础，并制作了一个更通用的版本，使您可以从给定触发器控制多个选择框。

Answer 5

所有这些方法都很棒。我发现了另一个简单的资源，它是在AJAX中使用“ onchange”创建动态表单的一个很好的例子。

Answer 6

我发现了以下解决方案……完美地为我工作:)

Answer 7

尝试使用它：

Answer 8

在选定的答案上，我看到最初加载页面时，第一个选项的选择是事先确定的，因此给出了选择2中所有类别的选项。您可以通过在两个选择标签中添加以下内容的第一个选项来避免这种情况：-<option value="none" selected disabled hidden>Select an Option</option>