JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<label>bayi</label><select class="bayi-flight">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Anak</label><select class="anak-flight">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label>Dewasa</label><select class="form-input-penumpang dewasa-flight">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
JavaScript
var $opsiDewasa = $(".dewasa-flight");
var $opsiAnak = $(".anak-flight");
var $opsiBayi = $(".bayi-flight");
function resetPilihan() {
$opsiDewasa.val('1');
$opsiAnak.val('0');
$opsiBayi.val('0');
}
$(".dewasa-flight, .anak-flight, .bayi-flight").change(function() {
var dewasa = parseInt($opsiDewasa.val());
var anak = parseInt($opsiAnak.val());
var bayi = parseInt($opsiBayi.val());
if (dewasa + anak > 7) {
resetPilihan();
alert("Jumlah dewasa dan anak tidak boleh melebihi 7");
} else if (dewasa < bayi) {
resetPilihan();
alert("Jumlah dewasa tidak boleh kurang dari jumlah bayi");
} else {
adultflight = dewasa;
childflight = anak;
babyflight = bayi;
}
});