Отображать элементы раскрывающегося списка друг на друга

Question

1) У меня есть два спуска с точно такими же значениями. Я хочу, чтобы выпадающий список 2 отображал значения на основе выбора элементов раскрывающегося списка 1. Таким образом, выбранный индекс выпадающего значения 2 будет равен или больше, чем выбранный индекс раскрывающегося списка 1. (этот код работает)

, но когда я добавить еще один выпадающий и на основе его пунктов два других выпадающие должны вести себя, как:

2) Если я выбираю TCD в первом раскрывающийся и измените значение B во втором раскрывающемся меню значение должно быть B в третьем выпадающем списке, но если я выберем BCD из первого раскрывающегося списка, он должен сохранить значения других двух выпадающих списков из предыдущего выбора. (не должен возвращаться к A)

Первая часть работает, но вторая часть имеет проблемы.

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

Fiddle с тремя выпадающие: 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

Поскольку у вас есть только один элемент с классом SELECTA и один с классом SELECTB, они всегда будут неопределенными:

var select1 = document.getElementsByClassName("SELECTA")[1]; 
var select2 = document.getElementsByClassName("SELECTB")[1]; 
var select1 = document.getElementsByClassName("SELECTA")[2]; 
var select2 = document.getElementsByClassName("SELECTB")[2]; 

Если вы пытаетесь предназначаться варианты, вы можете переместить классы опций сами по себе, или вы могли бы ссылаться на них, как это:

document.getElementsByClassName("SELECTA")[0].options[1] 

Не уверен, почему вы удаляете/добавление элементов в SELECTB элемента, но это то, что вы собираетесь?

function clickButton() { 
 
    var Type= document.getElementById('Type'); 
 
    var select1= document.getElementById('SELECTA'); 
 
    var select2= document.getElementById('SELECTB'); 
 

 
    if(Type.value === 'TCD') { 
 
    for(var i = 0 ; i < select1.options.length ; i++) { 
 
     select2.options[i].disabled= i < select1.selectedIndex; 
 
    } 
 
    select2.value= select1.value; 
 
    } 
 
    else { 
 
    for(var i = 0 ; i < select2.options.length ; i++) { 
 
     select2.options[i].disabled= false; 
 
    } 
 
    } 
 
}

<select name="Type" id="Type" onchange="clickButton()"> 
 
    <option value="TCD">TCD</option> 
 
    <option value="MCD">MCD</option> 
 
    <option value="BCD">BCD</option> 
 
</select> 
 

 
<select id="SELECTA" onchange="clickButton()"> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    <option value="D">D</option> 
 
</select> 
 

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

Answer 2

Вы можете пойти куда-то вдоль этих линий

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>