带有第二个预选项的链接选择<select>

Question

http://jsfiddle.net/LZhQ8 有一个链接的选择示例：

<select id="firstSelect">
<option value="blah1">Blah1</option>
<option value="blah2">Blah2</option>
<option value="blah3">Blah3</option>
</select>
<select id="secondSelect">
</select>
var options = {
blah1: ["A", "B", "C"],
blah2: ["D", "E", "F"],
blah3: ["G", "G", "I"]
};
$(function(){
$('#firstSelect').change(function() {
    var x= $('#firstSelect :selected').val();
    $('#secondSelect').html("");
    for(index in options[x]) {
        $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
    };
});})

其中一个选项显示在第一个下拉列表中，但在第一个下拉列表中选择某些内容之前，不会显示第二个下拉列表的选项。

我希望第二个下拉列表中的选项已经存在，具体取决于第一个下拉列表中的"selected='selected'"是什么。

这样的事情能做到吗？

Answer 1

最简单的

方法是通过在末尾链接对.change()的调用来触发现有的更改处理程序(其中没有参数的.change()是.trigger('change')的快捷方式(：

var options = {
blah1: ["A", "B", "C"],
blah2: ["D", "E", "F"],
blah3: ["G", "G", "I"]
};
$(function(){
  $('#firstSelect').change(function() {
    var x= $('#firstSelect').val();
    $('#secondSelect').html("");
    for(index in options[x]) {
        $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
    };
  }).change();   // <---- ADD THIS
;})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="firstSelect">
<option value="blah1">Blah1</option>
<option value="blah2" selected>Blah2</option>
<option value="blah3">Blah3</option>
</select>
<select id="secondSelect">
</select>

作为可选的附加功能，我已将$('#firstSelect :selected').val()更改为$('#firstSelect').val()，因为您可以直接获取(单选(选择元素的当前选定值，而不必通过选定的选项元素。