Question

我有三个选择项目：

 <select name="select1" id="select1">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
 <option value="3">Item 3</option>
 </select>

 <select name="select2" id="select2">
 <option value="1">Item 1 second</option>
 <option value="2">Item 2 second</option>
 <option value="3">Item 3 second</option>
 </select>

 <select name="select3" id="select3">
 <option value="1">Item 1 third</option>
 <option value="2">Item 2 third</option>
 <option value="3">Item 3 third</option>
 </select>

使用以下代码我可以更改第二个选择元素：

 <script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){
 $("#select1").change(function() { 
 if($(this).data('options') == undefined){
 /*Taking an array of all options-2 and kind of embedding it on the select1*/
 $(this).data('options',$('#select2 option, #select3 option').clone());
 } 
 var id = $(this).val();
 var options = $(this).data('options').filter('[value=' + id + ']');
 $('#select2, #select3').html(options);
 });

 });//]]>  
 </script>

查看演示： http://jsfiddle.net/MNs9t/

这很好用，除了我想要更改select3中的选项以及选择1中的所选项目。所以我尝试了以下代码：

 <script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){
 $("#select1").change(function() { 
 if($(this).data('options') == undefined){
 /*Taking an array of all options-2 and kind of embedding it on the select1*/
 $(this).data('options',$('#select2 option, #select3 option').clone());
 } 
 var id = $(this).val();
 var options = $(this).data('options').filter('[value=' + id + ']');
 $('#select2, #select3').html(options);
 });

 });//]]>  
 </script>

但是这将显示两个选择项目中select2和select3的所有选项。我想在select3中做同样的事情，就像在select2中一样......有人可以帮忙吗？

参见演示： [http://jsfiddle.net/MNs9t/1/] [2]

Answer 1

我可以看到的一个问题是你试图使用select1中的相同键从select2和select3中保存选项参考。

var $select2 = $('#select2'), $select3 = $('#select3');
$("#select1").change(function () {
    var id = $(this).val();

    if ($select2.data('options') == undefined) {
        $select2.data('options', $select2.find('option').clone());
    }
    var options = $select2.data('options').filter('[value=' + id + ']');
    $select2.html(options);

    if ($select3.data('options') == undefined) {
        $select3.data('options', $select3.find('option').clone());
    }
    var options = $select3.data('options').filter('[value=' + id + ']');
    $select3.html(options);
});

演示：Fiddle

Answer 2

那样的东西？

JS - jsfiddle

$("#select1").change(function() {
    var se = $(this).prop('selectedIndex');
    $("#select2").prop('selectedIndex',se);
    $("#select3").prop('selectedIndex',se);
});

或类似的东西？

JS - jsfiddle

$("#select1").change(function() {
    var va = $(this).val();
    $("#select2").val(va);
    $("#select3").val(va);
});

我不知道你真正想要的是什么：）

在改变第一个时改变两个选择元素

2 个答案:

JS - jsfiddle

JS - jsfiddle