Question

The code below does the following. A user selects a SVN branch from the dropdown. This loads another page with the associated modules inside another dropdown. It works fine and the Continue button is disabled when the second dropdown (module_name) isn’t selected. However, if I go back and select a different branch from the first dropdown, the Continue button is active, I need it to reset to disable.

HTML code

<select name="branch_name" id="branch_name">
    <option value="">-- Select a branch --</option>
<?php
    foreach($results as $k) {
        echo "<option value='{$k}'>{$k}</option>";
    }
?>
</select>

<select name="module_name" id="module_name">
    <option value="">-- Select a module --</option>
<?php
    foreach($results as $k) {
        echo "<option value='{$k}'>{$k}</option>";
    }
?>
</select>

JS code

$(document).on('change', '#module_name', function(){
    $('#continue').prop('disabled', $('#module_name option:selected').length == '');
});

$('#branch_name').on("change", function() {
    $('#output').load('/tags/module',{branch_name: $(this).val()});
});

New JS Code which works

$(document).on('change', '#module_name', function(){
    $('#continue').prop('disabled', $(this).val() =='');
});

$('#branch_name').on("change", function() {
    $("#continue").attr("disabled", "disabled");
    $('#output').load('/tags/module',{branch_name: $(this).val()});
});

Answer 1

length is a number and your test was checking if there is an option in the select, so it won’t ever equal ''

    /* checks how many eleemnts match selector, will return "0" if none exist*/
    $('#module_name option:selected').length

Use val() to see if select has a value

$(document).on('change', '#module_name', function(){
    $('#continue').prop('disabled', $(this).val() =='');
});