javascript - 显示基于彼此的下拉项

Question

1) 我有两个具有完全相同值的下拉菜单。我希望下拉列表 2 根据下拉列表 1 的项目选择显示值。因此下拉列表 2 的选定索引将等于或大于下拉列表 1 的选定索引。(此代码有效)

但是当我再添加一个下拉菜单并根据其项目其他两个下拉菜单的行为时:

2) 如果我在第一个下拉列表中选择 TCD 并在第二个下拉列表中更改为值 B，那么在第三个下拉列表中该值也应该是 B 但如果我选择 BCD 从第一个下拉菜单中，它应该保留之前选择的其他两个下拉菜单的值。(不应该返回到 A)

第一部分工作正常，但第二部分有问题。

fiddle :1) http://jsfiddle.net/wtLm4805/2/

摆弄三个下拉菜单:2) http://jsfiddle.net/wtLm4805/3/

 while (select2.firstChild) {
    select2.removeChild(select2.firstChild);
}

for (var i = 0; i < select1.options.length; i++) {
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    (i < select1.selectedIndex) 
? o.disabled = true 
: o.disabled = false ;        
    select2.appendChild(o);
}

我哪里错了？

Answer 1

你可以沿着这些路线去某个地方

var typeValue = 'TCD'; // default initialisation

$('#Type').change(function(){
    var value = $(this).val();
    console.log(value);
    if(value == 'TCD')
    {
        typeValue = 'TCD';
        // change something in other selects too
    }
    else if(value == 'MCD')
    {
        typeValue = 'MCD';
    }
    else if(value == 'BCD')
    {
        $('#SELECTA').val('B');
        $('#SELECTB').val('B');
        typeValue = 'BCD';
    }
    
});

$('#SELECTA').change(function(){
    var value = $(this).val();
    console.log(value);
    if(typeValue = 'TCD')
    {
        $('#SELECTB').val(value);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="Type" id="Type"  >
     <option value="TCD">TCD</option>
     <option value="MCD" >MCD</option>
     <option value="BCD" >BCD</option>
  </select>

<select id="SELECTA" class="SELECTA">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="SELECTB" class="SELECTB"  >
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>