chained select

by Akram kamal

HTML

<div class="menu">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select disabled>
        <option></option>
    </select>
    <select disabled>
        <option></option>
    </select>
</div>

JavaScript

$(function () {
    var selectValues = {
        "1": {
            "1-1": "1-1",
                "1-2": "1-2"
        },
            "2": {
            "2-1": "2-1",
                "2-2": "2-2"
        },
            "1-1": {
            "1-1-1": "1-1-1",
                "1-1-2": "1-1-2"
        },
            "1-2": {
            "1-2-1": "1-2-1",
                "1-2-2": "1-2-2"
        },
            "2-1": {
            "2-1-1": "2-1-1",
                "2-1-2": "2-1-2"
        },
            "2-2": {
            "2-2-1": "2-2-1",
                "2-2-2": "2-2-2"
        }
    };
   var $menus = $(".menu select")
   $menus.change(function(){
       var val = $(this).val() 
       console.log(val, $menus.index(this) )
        
        $(this).next().empty().prop({disabled:false}).html(function(){
            var output = '';
            $.each(selectValues[val], function (key, value) {
                output += '<option>' + key + '</option>';
            });
            return output;
        }).nextAll().prop({disabled:true}).empty()
    }).first().change()

});