How to disable <select> based on other <select> on Select2.js

Question

i'm having a little trouble with disabling a "select" input.

I need to disable "cidade" whenever nothing is selected on "estado".

here's my code:

<select id="estado" class="select_customized">
    <option></option>
    <option value="sp">São Paulo</option>
    <option value="mg">Minas Gerais</option>
    <option value="rj">Rio de Janeiro</option>

</select>

<select id="cidade" class="select_customized">
     <option></option>
     <option value="sao-paulo">São Paulo</option>
     <option value="minas-gerais">Minas Gerais</option>
     <option value="rio-de-janeiro">Rio de Janeiro</option>

</select>

And here's the script i'm using:

$("#cidade").select2("enable", false); 

    $("#estado").on('change',function(){

    var is_empty = $('#estado').is(":empty");

        if(is_empty){

            $("#cidade").select2("enable", false); 

        }

        else {

            $("#cidade").select2("enable", true); 

        }

    });

this kinda works, but whenever i choose something on the "estado" input, and clear it again, "cidade" does not disable again... any suggestions?

Answer 1

You probably want to use the select2 call to check if the selection box is empty, instead of going into the original #estado box you created (since that is hidden by select2).

Your call:

var is_empty = $('#estado').is(":empty");

then can be changed to something like:

var is_empty = $('#estado').select2("val") == "";

and that did the job for me. Note that the actual comparison above will differ a bit depending on for example if you are using a multi-valued selection box.