使用CSS類動態顯示select中的數據

Question

我在選擇框中使用CSS， 但我的動態數據未顯示。 :(

如果我刪除的選擇框區域內的類，選擇「省」後 數據顯示由id來獲取。

我的數據在Firebug控制檯， 顯示，但是在選擇不顯示盒子 'kabupaten'/ '城市'

截圖：

代碼： 的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> 

代碼：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 
    } 
    ?> 

代碼：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

如果我在讀你的問題的權利，你希望你的清單後更新ajax請求。

This answer看起來完全覆蓋你所需要的東西。 「CMS」的答案中的關鍵點是'.empty（）'和'.append（）'。

另外我不認爲<br />是選擇列表的選項之間的必要。

編輯2015年2月25日： 雖然我還是覺得我的第一個答案是真實的，提供了一個鏈接，我可以看到什麼在好一點好去的視圖。我在我的答案內部工作猜測的話，我的評價是：

請看下面的HTML直接從網站拉：

<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> 

在AJAX調用這一行$("select.kabupaten").html(msg);尋找一個選擇列表中用kabupaten類。雖然你的代碼確實有一個類和選擇列表下的選擇列表，你正在查看構成你有2個選擇列表和一個類'kabupaten'隱藏與style="display:none;" 我只能推測是否有更多的去在這一點上的背景。在您的模板或包含文件中存在一些模糊的代碼，但追蹤<div class="header">的來源將允許您在選擇列表中正確設置類「.kabupaten」。