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，但现在我无法弄明白。任何人都可以帮忙搞定这个吗？

提前谢谢。

编辑：我明白了！我需要在结束时添加$('#secondSelect').selectmenu('refresh', true);，然后关闭整个块。它工作正常，我只需要刷新第二个选择下拉以更新它。希望这有助于某人。

顺便说一句，我无法回答我自己的问题，所以我只是添加了这个编辑。任何人都可以随时回答。

Answer 1

基本上你错误地命名了很多东西。您在HTML中使用了value而不是id。您获得了val() secondSelect而不是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>')
        };
    });
});

Answer 2

好的，你的代码中有些错误......

首先，您的选择元素没有ID属性，您将“ids”插入名为value的属性
其次，在你的javascript函数中，你试图以错误的方式从select1中获取选定的值...正确的形式将是$('#firstSelect :selected').val()
最后一个，当您使用.append()方法时，您不会清除旧的HTML，因此，在使用.html("")方法之前，您必须使用.append() ...

这是一个带有功能示例的jsfiddle。

使用JAM更改基于先前选择值的选择选项

2 个答案: