CODEWITHSUNDEEP
javascriptjquery
Saint Robson
Saint Robson

Reputation: 5525

jQuery Check Other Select Elements Once This Is Selected

I have 3 HTML select under 1 div :

<div id="kurir_list">
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <select disabled class="tarif">
        <option select="selected"></option>
        <option value="12000">JNE REGULER</option>
        <option value="18000">JNE YES</option>
        </select>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <select disabled class="tarif">
        <option select="selected"></option>
        <option value="12000">JNE REGULER</option>
        <option value="18000">JNE YES</option>
        </select>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <select disabled class="tarif">
        <option select="selected"></option>
        <option value="12000">JNE REGULER</option>
        <option value="18000">JNE YES</option>
        </select>
      </div>
    </div>  
</div>

and I have this jquery : 

$(".tarif").change(function() {
    if ($(".tarif").is(':disabled')) {                          
        alert ("yes you still have disabled element, next button disabled");
    } else {
        alert ("no, you don't have disabled element");

        // check the other select value
        $(".tarif").each(function() {
            alert($(this).val());
        });
    }
});

every time a .tarif is selected, I need to check the other two select element value. whether it's still empty or not. but, my jquery code alert all 6 values from all select elements.

how to make jquery to be able to inform me, whether in #kurir_list still have empty select or not. thank you.

Upvotes: 1

Views: 31

Answers (1)

Caleb O&#39;Leary
Caleb O&#39;Leary

Reputation: 763

Perhaps you can try something like this, look at every select in your wrapper, if any have an empty val() then your variable will be true, in which case you can do something

var emptySelect = false;
$('#kurir_list select').each(function(){
    if (!$(this).find('option:selected').val()) {
        emptySelect = true;
    }
});
alert(emptySelect);

Upvotes: 2

Related Questions