3 select elements that change options based on the selected option in the first and second select

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!
Thanks in advance!

Answer 1

When you are passing the value to the next drop down you are passing the index from dropdown 1 to dropdown 2, from dropdown 2 to dropdown 3 you're passing the value.
drop down one you select first option The value passed to the second drop down is 1. The value you select drop down two is 1 The value you pass is test1

The values you are using in drop down 2 are dependent or pointing to the values of drop down one. You should decouple this, specifically pass the index or value to set the options array.

Something like so: ` $(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>"
];

}); `