Robert Hanson Robert Hanson - 7 months ago 32
Javascript Question

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.

Answer

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