3个选择元素，它们根据第一选择和第二选择中的所选选项更改选项

Question

标题可能有点令人困惑，但是在这里我们详细介绍。 所以我有3个下拉列表。 基于第一个“选择”选定选项中的选定选项，第二个“选择”元素中的选项必须唯一。 与第三个相同，它应基于第二个“选择”所选选项中的所选选项具有唯一的选项。

据我所知，我可以根据在第一个“选择”上选择的内容来更改第二个“选择”选项，但是当我更改第二个“选择”选项时，第三个“选择”选项不会更改所有。 这是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。选择下拉菜单2的值是1。传递的值是test1

您在下拉菜单2中使用的值取决于或指向下拉菜单1的值。 您应该对此进行解耦，特别是传递索引或值来设置options数组。

像这样：`$（document）.ready（function（）{

$("#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>"
];

}）; `