javascript - 预选第二个 <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() 因为您可以直接获取(单选)选择元素的当前选定值，所以您不必通过选定的选项元素。