how i enable disabled select n°2 after select n°1 was selected?

Question

I did this in javascript code, but it does not work perfectly, the second "select" perfectly "disabled" by default, but I want when I selected an option from the first "select": the second will be "enabled" but it does not work,

and this is the code :

 // JavaScript Document var update_select = function () { if ($("#edit-field-villes-tid").is(":selected")) { $('#edit-field-villages-tid-option-limit').prop('disabled', false); }else { $('#edit-field-villages-tid-option-limit').prop('disabled', 'disabled'); } }; $(update_select); $("#edit-field-villes-tid").change(update_select); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form > <div class="views-exposed-widgets clearfix"> <label for="edit-field-villes-tid">Villes </label> <select id="edit-field-villes-tid" name="field_villes_tid" class="form-select"> <option value="All" selected="selected">- Any -</option> <option value="21">Sousse</option> <option value="22">Tunis</option></select> <label for="edit-field-villages-tid-option-limit">Villages </label> <select id="edit-field-villages-tid-option-limit" name="field_villages_tid_option_limit" class="form-select"> <option value="All" selected="selected">- Any -</option> <option value="24">El Zahra</option> <option value="23">Sahlool</option> </select> <input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-tunisia" name="" value="Apply"> </div></form> 

someone can help me ?

Answer 1

This worked for me;

<script language='javascript' type='text/javascript'>
    var update_select = function () {
        if ($("#edit-field-villes-tid")[0].selectedIndex > 0) {
            console.log("is selected");
            $('#edit-field-villages-tid-option-limit').prop('disabled', false);
        } else {
            console.log("is NOT selected");
            $('#edit-field-villages-tid-option-limit').prop('disabled', true);
        };
    };
    $(update_select);
    $("#edit-field-villes-tid").on("change", update_select);
</script>

Changing the IF check to [0].selectedIndex > 0 was the key.