jquery - 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

您的代码存在一些问题。

首先，

$("item3").html(options[value]);

应该改为：

$("#item3").html(options1[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 options = [
        "<option value='0'>item1: test 1</option><option value='test2'>item1: test 2</option>",
        "<option value='1'>item2: test 1</option><option value='test2'>item2: test 2</option>",
        "<option value='2'>item3: test 1</option><option value='test2'>item3: test 2</option>"
    ];

我已经更新了你的 jsFiddle http://jsfiddle.net/2hyda4b1/2/

更新：

这里有一个可能有帮助的解决方案：

Javascript：

       <script type="text/javascript">
            var opt1 = ['Opt A', 'Opt B', 'Opt C'],
                opt2 = [
                    ['OptA A', 'OptA B', 'OptA C'],
                    ['OptB A', 'OptB B', 'OptB C'],
                    ['OptC A', 'OptC B', 'OptC C']
                ],
                opt3 = [
                    [
                        ['OptAA A', 'ObtAA B', 'OptAA C'],
                        ['OptAB A', 'ObtAB B', 'OptAB C'],
                        ['OptAC A', 'ObtAC B', 'OptAC C'],
                    ],
                    [
                        ['OptBA A', 'ObtBA B', 'OptBA C'],
                        ['OptBB A', 'ObtBB B', 'OptBB C'],
                        ['OptBC A', 'ObtBC B', 'OptBC C'],
                    ],
                    [
                        ['OptCA A', 'ObtCA B', 'OptCA C'],
                        ['OptCB A', 'ObtCB B', 'OptCB C'],
                        ['OptCC A', 'ObtCC B', 'OptCC C'],
                    ]
                ];
            jQuery(document).ready(function() {
                // populating first dropdown when the page loads...
                jQuery.each(opt1, function(i, e) { jQuery('#select1').append('<option value="'+i+'">'+e+'</option>'); });
                jQuery('body').on('change', '#select1', function() {
                    jQuery('#select2').empty();
                    jQuery.each(opt2[jQuery('#select1').val()], function(i, e) { jQuery('#select2').append('<option value="'+i+'">'+e+'</option>'); });
                });
                jQuery('body').on('change', '#select2', function() {
                    jQuery('#select3').empty();
                    jQuery.each(opt3[jQuery('#select1').val()][jQuery('#select2').val()], function(i, e) { jQuery('#select3').append('<option value="'+i+'">'+e+'</option>'); });
                });
            });
        </script>

HTML：

    <select id="select1">

    </select>
    <select id="select2">

    </select>
    <select id="select3">

    </select>

更新 2：

试试这个jsFiddle。

Answer 2

参考以下代码，摆弄http://jsfiddle.net/2hyda4b1/7/

$(document).ready(function() {


$("#item1, #item2").change(function() {
    if($(this).attr('id') == 'item1')
  {
    var value = $(this).val();
    $("#item2").html(options[value]);
  }else if($(this).attr('id') == 'item2')
  {
     var value1 =$("#item2").val();
    $("#item3").html(options1[value1]);
  }



});


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


var options1 = ["<option value='0'>item33313: test 3332233</option><option value='1'>item333: test 33333</option>","<option value='0'>item33313: tesdadadadadat 3332233</option><option value='1'>item333: test 33333</option>","<option value='1'>itlolooloem33313: test 3332233</option><option value='2'>item333: ltoltrolltest 33333</option>"];
});