<select> 按位置同步<option>

Question

我只能选择下一次同步是由onchange事件完成的，如"mySelect"sync"mySelect1"、"mySelect2"sync"mySelect3"

   <form>
<select name="mySelect" id="mySelect" onchange="mySelect1.options[selectedIndex].selected=true">
<option value="qww">qww</option>
<option value="12">12</option>
<option value="12w">12w</option>
<option value="wq">wq</option>
</select>
<select name="mSelect1" id="mySelect1" onchange="mySelect2.options[selectedIndex].selected=true" >
<option value="1s">1s</option>
<option value="22s">22s</option>
<option value="wz">wz</option>
<option value="wzz">wzz</option>
</select>
<select name="mSelect2" id="mySelect2" onchange="mySelect3.options[selectedIndex].selected=true">
<option value="Apple">Apple</option>
<option value="dddw">dddw</option>
<option value="xc">xc</option>
<option value="zz">zz</option>
</select>
<select name="mSelect3" id="mySelect3" >
<option value="ddd">ddd</option>
<option value="ddxw">ddxw</option>
<option value="xxc">xxc</option>
<option value="zxz">zxz</option>
</select>
</form>

但我认为通过选择第一个选择，让所有的值都选择相同的位置后面的所有显示。你能做到吗？

就像这样，当我选择"mySelect"的"12"，然后"22s"的"mySelect1"，"dddw"的"mySelect2"，"mySelect3"的"ddxw"同时选择时，从的相同位置

Answer 1

我脑海中的代码，应该通过完成工作

$("select").change(function() {
    var targetIndex=$(this).prop("selectedIndex")
    $("select").each(function() {
        $(this).val($(this).find("option:eq("+targetIndex+")").val());
    });
});

示例

http://jsfiddle.net/uvmt0wos/