jquery - 3 Level dependent select list

Question

The title maybe a little confusing but here we go in details. So i have 3 dropdown-lists. The options in the second 'select' element have to be unique, based on the selected option in the first 'select' selected option. Same thing with the third one, it should have unique options based on the selected option in the second 'select' selected option.

As far as i have gone, i am able to change the second 'select' options based on what i select on the first 'select', but when i change the second 'select' option, the third 'select' options dont change at all. Here is the 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>

Here is the 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>"];

});
And here is the JSfiddle: http://jsfiddle.net/2hyda4b1/ Any help/tip is appreciated a lot!

have you tried googling `jquery chained html select` ? tons of answers already — vsync, Jun 10 '17 at 12:34

Hemant Kumar · Accepted Answer · 2017-06-13T07:26:24.333

There are some issues with your code.

Firstly,

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

should be changed to:

$("#item3").html(options1[value]);

Next, the list of options for second dropdown:

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

should have the 'value' attribute updated like:

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

I have updated your jsFiddle http://jsfiddle.net/2hyda4b1/2/

Update:

Here's a solution that might help:

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>

Update 2:

Try this jsFiddle.

Thank you for your input and fixing a part of my code. but as you can see on the fiddle, the third select changes when you change the first select, when actually what i want to achieve is like below: when change first select,update options of second select. when change second select, update options of third select, and finally just select the needed option from that. basically i need a list of cities, depending on city i need the hospital name, and depending on the hospital name, i choose the type of service. — master Nixe, Jun 10 '17 at 12:07
I tried the code but it doesn't work. thank you for the input tho. — master Nixe, Jun 12 '17 at 13:08
@hermant i tried it and now it works! thank you very much! But i already did it by myself. with hundreds of If conditions(if selectedIndex.text="name"). Your method is way shorter than mine, but they both work tho :P thanks again! Edit: soon enough we are going to update the selectx elements options. I will probably use your code. U ROCK MAN — master Nixe, Jun 14 '17 at 13:14

score 0 · Answer 2 · answered Jun 10 '17 at 12:22

Refer to the following code and fiddle 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>"];
});

First of all, Thanks a lot! it seems to work until a point, when i change the second select's option, how does it populate the third select with the right options? how does 'value' relate to it? please advice, this is really important to me. thanks in advance! — master Nixe, Jun 12 '17 at 13:08

jquery - 3 Level dependent select list

2 Answers2