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>" 
]; 

}）; `