How To Update Multiple Dropdown Selects When User Changes One Selection

I've got some HTML/jQuery code that displays three menus. When the user changes the selection in the first menu then the second menu gets reloaded. When the users changes the selec

Solution 1:

If you want it to scale, you can’t pretend to know how many menus you have.

https://jsfiddle.net/jakecigar/xxxfqtzj/3/ Does not care about how many menus, just that they are one after another.

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()