jQuery addClass example

Change class name on click in jQuery

by synz izynz

HTML

<!-- page main.php -->
Negeri : 
<select name="negeri">
<option value="">Sila Pilih</option>
<option value="11">Terengganu</option>
<option value="01" selected>Selangor</option>
<option value="03">Pahang</option>
</select>
<br>

Daerah : 
<!-- data-default tu kalau ade edit. lps tu dh ade id daerah. ltk dlm ni. supaya dia auto tuka -->
<select name="daerah" data-default="4">
<option value="">Sila Pilih Daerah</option>
</select>

<br>
<br>
<b>
- anggap bawah ni page lain. yg akan run query daerah<br>
- page get_daerah.php<br>
- return result html option listing. dn abaikan div tu<br>
</b>
<br>
<!-- bile ID terengganu -->
<div class="11">
<!-- 
  option looping dari result parent negeri id=11 
  return ajax option je. bukan skali dgn div atas
-->
<option value="">Sila Pilih Daerah</option>
<option value="1">k.trg</option>
<option value="2">kemamam</option>
</div>

<br>
<!-- bile ID selangor -->
<div class="01">
<!-- 
  option looping dari result parent negeri id=01
  return ajax option je. bukan skali dgn div atas
-->
<option value="">Sila Pilih Daerah</option>
<option value="1">gombak</option>
<option value="2">petaling</option>
<option value="3">klang</option>
</div>

<br>
<!-- bile ID terengganu -->
<div class="03">
<!-- 
  option looping dari result parent negeri id=03
  return ajax option je. bukan skali dgn div atas
-->
<option value="">Sila Pilih Daerah</option>
<option value="1">raub</option>
<option value="2">rompin</option>
<option value="3">pekan</option>
</div>

JavaScript

$(document).ready(function(){

  /* console.log(d_ter) */;
  $("[name='negeri']").on("change",function(){
  	var neg = $(this).val();
  	
    /*
				$.ajax({
					type		: "POST",
					data		: "idnegeri="+neg,
					url 		: "get_daerah.php",
					success 	: function(result){
              var trg_ele = $("[name='daerah']");
              trg_ele.empty();
              if(neg !== ''){
                var elem = result;
                trg_ele.append(elem);
                trg_ele.children("option[value='" + trg_ele.data("default") + "']").prop("selected",true);
              }else{
                trg_ele.append("<option value=\"\">Sila Pilih Negeri</option>");
              }
					}
    */
    
    /* remove bwh ni lps nk guna ajax atas */
    var trg_ele = $("[name='daerah']");
    trg_ele.empty();
    if(neg !== ''){
    	var elem = $("div."+neg).html();
    	trg_ele.append(elem);
      trg_ele.children("option[value='" + trg_ele.data("default") + "']").prop("selected",true);
    }else{
    	trg_ele.append("<option value=\"\">Sila Pilih Negeri</option>");
    }
    /* end remove */
    
  });
	
  $("[name='negeri']").trigger("change");
});