javascript - 使用 JAM 根据先前的选择值更改选择选项

Question

我想根据我在第一个选择下拉列表中选择的内容更改第二个选择下拉列表中的选项。我已经使用常规的旧 JS 完成了此操作，但我想要在 JQM 中使用更好的方法来完成此操作。

我有一个包含所有选项的对象，如下所示:

var options = {
    blah1: ["A", "B", "C"],
    blah2: ["D", "E", "F"],
    blah3: ["G", "G", "I"]
};

我有这些选择输入:

<select value="firstSelect">
    <option value="blah1">Blah1</option>
    <option value="blah2">Blah2</option>
    <option value="blah3">Blah3</option>
</select>

<select value="secondSelect">
</select>

这是我目前 main.JS 中的内容:

$('#firstSelect').change(function() {
    var x= $('#secondSelect').val()
    for(index in options[x]) {
        $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
    };
});

当在第一个选择下拉列表中选择 blah1 时，第二个选择下拉列表将填充 options.blah1 值。然后 blah2 和 blah3 也一样。这就是我正在努力实现的想法。

我有一个类似的版本，没有使用 JQM，但现在我无法弄清楚。任何人都可以帮助实现这个工作吗？

提前谢谢您。

编辑:我明白了!我需要在关闭整个 block 之前在末尾添加 $('#secondSelect').selectmenu('refresh', true); 。它正在工作，我只需要刷新第二个选择下拉列表即可更新它。希望这对某人有帮助。

顺便说一句，我无法回答我自己的问题，所以我只是添加了这个编辑。大家可以随意回答。

Answer 1

基本上你对很多东西的命名都是错误的。您在 HTML 中使用了 value 而不是 id。您获得了 secondSelect 的 val()，而不是 firstSelect。

HTML

<select id="firstSelect">
<option value="blah1">Blah1</option>
<option value="blah2">Blah2</option>
<option value="blah3">Blah3</option>
</select>

<select id="secondSelect">
</select>​

Javascript

var options = {
    blah1: ["A", "B", "C"],
    blah2: ["D", "E", "F"],
    blah3: ["G", "G", "I"]
};

$(function() {
    $('#firstSelect').change(function() {
        var x = $('#firstSelect').val()
        for (var index in options[x]) {
            $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
        };
    });
});​