3選擇基於第一個和第二個選擇中所選選項更改選項的元素

Question

標題可能有點令人困惑，但在此處我們會詳細討論。 所以我有3個下拉列表。第二個'select'元素中的選項必須是唯一的，這取決於第一個「選擇」選項中的選定選項。 與第三個相同的東西，它應該有基於選擇的第二個選擇選項中的選項的獨特選項。

就我而言，我可以根據我在第一個'select'選擇的內容更改第二個'select'選項，但是當我更改第二個'select'選項時，第三個'select'選項根本不會改變。 下面是HTML：

<select id="item1"> 
<option value="0">1 item</option> 
<option value="1">2 item</option> 
<option value="2">3 item</option> 
</select> 

<select id="item2"> 
<option value="">-- select one -- </option> 
</select> 

<select id="item3"> 
<option> -- select another one --</option> 
</select> 

這裏是jquery的：

$(document).ready(function() { 


$("#item1, #item2").change(function() { 
    var value = $(this).val(); 
    $("#item2").html(options[value]); 

    var value1 =$("#item2").val(); 
    $("item3").html(options[value]); 
}); 


var options = [ 
    "<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>", 
    "<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>", 
    "<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>" 
]; 


var options1 = ["<option value='test'>item33313: test 3332233</option> 
<option value='test3'>item333: test 33333</option>","<option 
value='test'>item33313: tesdadadadadat 3332233</option><option 
value='test3'>item333: test 33333</option>","<option 
value='test'>itlolooloem33313: test 3332233</option><option 
value='test3'>item333: ltoltrolltest 33333</option>"]; 

}）;
這裏是JSfiddle： http://jsfiddle.net/2hyda4b1/ 任何幫助/提示是非常感謝！
在此先感謝！

Answer 1

當您將值傳遞給下一個下拉列表時，您將傳遞索引從下拉列表1傳遞到下拉列表2，從下拉列表傳遞2到下拉列表3傳遞該值。
下拉一個選擇第一選項 傳遞給第二液滴的值向下是1 選擇值下拉二是1 傳遞的值TEST1

您使用在下拉的值2依賴或指向下拉一個的值。你應該解耦這個，特別是傳遞索引或值來設置選項數組。

東西像這樣： ' $（文件）。就緒（函數（）{

$("#item1").change(function() { 
    var value = $(this).val(); 
    $("#item2").html(options[value]); 
}); 

$("#item2").change(function() { 
    var value = $(this).val(); 
    $("#item3").html(options[value]); 
}); 


var options = [ 
    "<option value='0'>item1: test 1</option><option value='1'>item1: test 2</option>", 
    "<option value='0'>item2: test 1</option><option value='1'>item2: test 2</option>", 
    "<option value='0'>item3: test 1</option><option value='1'>item3: test 2</option>" 
]; 

}）; `