Question

http://jsfiddle.net/LZhQ8上有一个链式选择示例：＆lt; select id =“firstSelect”＆gt; ＆lt; option value =“blah1”＆gt; Blah1＆lt; / option＆gt; ＆lt; option value =“blah2”＆gt; Blah2＆lt; / option＆gt; ＆lt; option value =“blah3”＆gt; Blah3＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select id =“secondSelect”＆gt; ＆LT; /选择＆GT; var options = { blah1：[“A”，“B”，“C”]， blah2：[“D”，“E”，“F”]， blah3：[“G”，“G”，“我”] }; $（函数（）{ $（'＃firstSelect'）。change（function（）{ var x = $（'＃firstSelect：selected'）。val（）; $（ '＃secondSelect'）HTML（ “”）。 for（options [x]中的索引）{ $（'＃secondSelect'）。append（'＆lt; option value =“'+ options [x] [index] +'”＆gt;'+ options [x] [index] +'＆lt; / option＆gt;'） }; }）;}）其中一个选项显示在第一个下拉列表中，但第二个下拉列表的选项在第一个下拉列表中选择了某些内容后才会显示。我希望第二个下拉列表中的选项已经存在，具体取决于第一个下拉列表中的“selected ='selected'”。可以这样做吗？

Answer 1

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

＆＃13;

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
;})

＆＃13;

<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>

＆＃13;

作为可选附加内容，我已将$('#firstSelect :selected').val()更改为$('#firstSelect').val()，因为您可以直接获取当前选定的（单选）元素值，但不要必须通过选定的选项元素。

使用第二个<select>预选

1 个答案: