Question

标题可能有点令人困惑，但在这里我们详细介绍。所以我有3个下拉列表。第二个'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。您选择的值下拉2是1 您传递的值是test1

您在下拉列表中使用的值取决于或指向下拉列表中的值。您应该将其解耦，特别是传递索引或值以设置选项数组。

这样的事情： ` $（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>"
];

}）; `

3选择基于第一个和第二个选择

1 个答案: