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

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>

使用下面的代码更改第二个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中的选项从select 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/

Answer 1

我看到的一个问题是，您试图使用select2和select3中相同的键保存来自select1和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);
});

演示：小提琴

Answer 2

像那样吗？

JS - 小提琴

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

或者类似的东西？

JS - 小提琴

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

我不知道你到底在找什么:)