Question

我在选择框中使用CSS，但我的动态数据没有显示。：（

如果我删除了选择框区域中的类并按ID获取，选择'省'后显示数据。

我的数据显示在Firebug控制台中，但不会显示在选择框'kabupaten'/'city'中。

截图： enter image description here

代码： 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看起来准确涵盖了您的需求。回答中的关键点＆＃34; CMS＆＃34;是＆＃39; .empty（）＆＃39;和＆＃39; .append（）＆＃39;。

此外，我不认为在选择列表的选项之间需要<br />。

编辑2/25/2015： 虽然我仍然觉得我的第一个答案是正确的，但是提供一个链接到一个视图，我可以看到哪些更好一点是好的。我在答案中对内部运作进行了推测，所以我的评估是：

考虑直接从网站上提取的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个选择列表和一个具有类＆＃39; kabupaten＆＃39;隐藏style="display:none;" 我只能推测此时背景是否还有更多。您的模板或包含文件中存在一些模糊代码，但跟踪<div class="header">来自的位置将允许您在选择列表中正确设置类“.kabupaten”。

使用CSS类从select动态显示数据

1 个答案: