how to create the 'if-else' condition with ajax jquery? - php

Question

how to create the 'if-else' condition with the following ajax jquery:
<script type="text/javascript">
$(document).ready(function () {
$('select[name="org_id"]').on('change', function () {
var stateID = $(this).val();
if (stateID){
$.ajax({
url: '<?php base_url();?>pasien_lama/dokter/'+stateID,
type: "GET",
dataType: "json",
success:function (data) {
$('select[name="person_id"]').empty();
$('select[name="person_id"]').append('<option >- Pilih Dokter -</option>');
$.each(data, function (key, value) {
$('select[name="person_id"]').append('<option value="'+ value.person_id +'">'+ value.person_nm +'</option>')
});
}
});
} else {
$('select[name="person_id"]').empty();
}
});
});
</script>
if not selected, the select option will return empty automatically
here is html code :
<label>Poli Tujuan</label>
<select class="form-control select2" name="org_id" style="width: 100%;">
<option selected="selected">- Pilih Poli -</option>
<?php foreach ($xocp_orgs as $nama_poli): ?>
<option value="<?php echo $nama_poli['org_id']; ?>"><?php echo $nama_poli['org_nm']; ?></option>
<?php endforeach; ?>
</select>
<label>Poli Dokter Spesialis</label>
<select id="imageSelector" class="form-control select2" name="person_id" style="width: 100%;" required>
<option>- Pilih -</option>
</select>

Answer 1

You can try something like jQuery.when() to get your task done, by making your method async. Resolve your actions based on your choice and then continue with necessary changes.
IF you want a learn better, this answer should help you.

Answer 2

Set the value for the default option to a empty string
<option selected="selected" value="">- Pilih Poli -</option>
change your if statement to
if (stateID.length) {//
demo:
$('select[name="org_id"]').on('change', function () {
var stateID = $(this).val();
if (stateID.length){
console.log('has values');
} else {
console.log('empty');
$('select[name="person_id"]').empty();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Poli Tujuan</label>
<select class="form-control select2" name="org_id" style="width: 100%;">
<option selected="selected" value="">- Pilih Poli -</option>
<?php foreach ($xocp_orgs as $nama_poli): ?>
<option value="<?php echo $nama_poli['org_id']; ?>">
<?php echo $nama_poli['org_nm']; ?>
</option>
<?php endforeach; ?>
</select>
<label>Poli Dokter Spesialis</label>
<select id="imageSelector" class="form-control select2" name="person_id" style="width: 100%;" required>
<option>- Pilih -</option>
</select>