Dynamically displaying data from select using CSS class

Question

I am using CSS in a select box, but my dynamic data is not displaying. :(

If I remove the class in select box area and get by id, the data displays after choosing 'province'.

My data is shown in the Firebug console, but not displayed in the select box 'kabupaten'/'city'.

Screenshot:

Code: index.php

<table>
        <tr>
            <td>Provinsi</td>
            <td>
                  <div class="control-group">
                      <div class="controls">
                         <select name="profinsi" class="profinsi" >
                <option value="" selected="selected">-->Choose Province<--</option>
                    <?php $sql="select * from all_provinsi";
                        $rs=mysql_query($sql);
                        while($row=mysql_fetch_object($rs)){ ?>
                <option value="<?php echo $row->id_prov; ?>"><?php echo $row->nama_prov; ?></option>
                    <?php } ?>
                         </select>
                      </div>
                   </div>
            </td>
        </tr>
        <tr>
            <td>Kabupaten</td>
            <td>
             <img src="loading.gif" width="10px" height="10px" id="imgLoad" style="display:none">
            <select name="Kabupaten" class="kabupaten" >
                <option value="" selected="selected">-->Choose City/Kabupaten<--</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>Kecamatan</td>
            <td>
             <img src="loading.gif" width="10px" height="10px" id="imgLoad" style="display:none">
             <select name="Kecamatan" class="kecamatan">
                <option value="" selected="selected">-->Choose Kecamatan<--</option>
             </select>
            </td>
        </tr>
        <tr>
            <td><input type="submit" name="submit" value="SUBMIT" /></td>
        </tr>
        </table>

<script type="text/javascript">
 // Get province and send to class city/kabupaten
   $("select.profinsi").change(function(){

      var IDProfinsi = $("select.profinsi").val();

      $("#imgLoad").show("");

      $.ajax({
         type: "POST",
         dataType: "html",
         url: "getkabupaten.php",
         data: "prov="+IDProfinsi,
         success: function(msg){

            if(msg == ''){
               alert('No Data');
            }

            else{
               $("select.kabupaten").html(msg);                                                      
            }

            $("#imgLoad").hide();
         }
      });     
   });

</script>

<script type="text/javascript">
   // Get city/kabupaten and send to class kecamatan
   $("select.kabupaten").change(function(){

      var IDKabupaten = $("select.kabupaten").val();

      $("#imgLoad").show("");

      $.ajax({
         type: "POST",
         dataType: "html",
         url: "getkecamatan.php",
         data: "kab="+IDKabupaten,
         success: function(msg){

            if(msg == ''){
               alert('No Data');
            }


            else{
               $("select.kecamatan").html(msg);                                                      
            }

            $("#imgLoad").hide();
         }
      });     
   });
</script>

Code: getkabupaten.php

<?php 
    include('koneksi.php');

    $sel_prov="select * from datakabupaten where IDProfinsi='".$_POST["prov"]."'";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){

    ?>
        <option value="<?php echo $data_prov["IDKabupaten"] ?>"><?php echo $data_prov["namakabupaten"] ?></option><br>

    <?php
    }
    ?>

Code: getkecamatan.php

<?php 
    include('koneksi.php');

    $sel_prov="select * from all_kecamatan where id_kabkot='".$_POST["kab"]."'";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){

    ?>
        <option value="<?php echo $data_prov["id_kec"] ?>"><?php echo $data_prov["nama_kec"] ?></option><br>

    <?php
    }
    ?>

Answer 1

If I'm reading your question right you want to have your list updated after a ajax request.

This answer Looks to cover exactly of what you need. Keypoints in the answer by "CMS" are the '.empty()' and '.append()'.

Also I don't think <br /> is necessary in between options of a select list.

EDIT 2/25/2015: While I still feel my first answer is true, providing a link to a view that I can see whats going on a little better is good. I'm speculating at the inner workings in my answer so, my assessment is:

Consider the html pulled directly from the site:

    <tr><td>Kabupaten</td><td>
<div class="selectify focus" tabindex="0" style="width: 189px;">
      <div class="header">
        <div class="selected" data-id="">--&gt;Pilih Kabupaten&lt;--</div><div class="icon"></div>
       </div>
       <div class="options" style="width: 189px; max-height: 290px; display: none;">
         <div class="option" data-id="" data-text="-->pilih kabupaten<--">--&gt;Pilih Kabupaten&lt;--</div>
        </div><!--endheader-->
     </div>
    <select name="Kabupaten" class="kabupaten" style="display: none;">
                    <option value="" selected="selected">--&gt;Pilih Kabupaten&lt;--</option>
    </select>
    </td></tr>

In the Ajax call this line $("select.kabupaten").html(msg); looks for a select list with the class of kabupaten. While your code does have a class and select list with that under the select list you are viewing constituting that you have 2 select lists and the one that has the class 'kabupaten' is hidden with style="display:none;" I can only speculate if there is more going on in the background at this point. There is some obfuscated code in your template or include files but tracking down where <div class="header"> is coming from will allow you to correctly set the class '.kabupaten` on your select list.