使用JQM更改基于之前选择值的选择选项

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时，第二个选择下拉菜单将填充选项ns.blah1值。然后与blah2和blah3一样。这是我想要工作的想法。

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

预先感谢您。

编辑：我想通了！最后我需要添加$('#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>') 
     }; 
    }); 
});​ 

Answer 2

好吧，这是你的代码的一些错误......

1. 首先，你的选择元素没有ID属性，你将“ids”插入到一个名为value的属性中
2. 其次，在你的碎木cript功能，你试图以错误的方式从select1中选择值...正确的形式将是$('#firstSelect :selected').val()
3. 最后一个，当你使用.append()方法你不清理旧的HTML，所以，你必须使用.html("")之前使用.append()方法...

这里是一个jsfiddle与官能例子。