Robert Hanson Robert Hanson - 7 months ago 16
HTML Question

Is This jQuery Bug On First Option Selected?

I have weird situation with

Select2
plugins :

When,
#state
is changed, it will do ajax request to get list of
#city
. once
#city
is selected, it will do ajax request to get
#area
list.

if I select
#city
option number 2, 3, etc... it will trigger
#area
to get the list. but if I choose option number 1, none will happen.

but once, I choose option number 2, 3, etc... then go back to choose option number 1, then it will run ajax perfectly.

pic 1 : Badung (option #1) is selected for the first time, not trigerring AJAX to get #area

Badung is selected for the first time, not trigerring AJAX to get #area

pic 2 : Bangli (option #2) is selected, it's trigerring AJAX to get #area

enter image description here

pic 3 : Back to Badung (option #1), now it's trigerring AJAX to get #area
enter image description here

here's my HTML structure :

<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default form-group-default-select2 required">
<label class="">State</label>
<select id="state" class="full-width" data-init-plugin="select2" name="state">
<option select="selected"></option>

<?
for ($i = 0; $i < $num_propinsi; $i++) {
$value = $propinsi[$i]['province_id'];
$text = $propinsi[$i]['province'];
echo '<option value="'.$value.'">'.$text.'</option>';
}
?>

</select>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<label>City</label>
<select id="city" class="full-width" data-init-plugin="select2" name="city" disabled>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<label>Area</label>
<select id="area" class="full-width" data-init-plugin="select2" name="area" disabled>
</select>
</div>
</div>
</div>


and here's my jquery :

<script>
$(function() {

$("#form-flogin").validate();

$("#state").change(function() {
$("#city").html("");
$("#s2id_city").find("#select2-chosen-2").html("");
$("#s2id_area").find("#select2-chosen-3").html("");
$("#area").prop("disabled", true);
$("#flogin-submit").prop("disabled", true);
var propinsi = $("#state").val();

$.ajax({
url: "controller/ctrl.getcityarea.php?req=city&val="+propinsi,
dataType: "JSON",
success: function(json){

var city = "";
$.each(json, function(i,o){
city += "<option value="+o.id+">"+o.city_name+"</option>";
});

$("#city").append(city);

event.preventDefault();
$("#city").prop("disabled", false);
}
})
});

$("#city").change(function() {
$("#area").html("");
$("#s2id_area").find("#select2-chosen-3").html("");
var city = $("#city").val();

$.ajax({
url: "controller/ctrl.getcityarea.php?req=area&val="+city,
dataType: "JSON",
success: function(json){

var area = "";
$.each(json.rajaongkir.results, function(i,o){
area += "<option value="+o.subdistrict_id+">"+o.subdistrict_name+"</option>";
});

$("#area").append(area);

event.preventDefault();
$("#area").prop("disabled", false);
}
});
});

$("#area").change(function() {
event.preventDefault();
$("#flogin-submit").prop("disabled", false);
});
})
</script>


any idea why
.change
method is not working on first attempt? but works on next attempt. thank you for your help

Answer

This is because you have written a change event listener for city dropdown and first city is default selected hence when you select it again it won't change the value therefore change event listener won't get fire.

You can do one of following two options

Option 1 : put extra option as "Select City" and then select first city of your choice.

$("#city").append("<option value=''>Select City</option>");
$("#city").append(city);

Opetion 2 : trigger change event through code

$("#city").append(city).change();