javascript - 使用 CSS 类动态显示来自选择的数据

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 />在选择列表的选项之间是必需的。

编辑 2/25/2015:虽然我仍然觉得我的第一个答案是正确的，但提供一个链接到我可以更好地了解正在发生的事情的 View 是很好的。我在猜测我的答案中的内部运作方式，所以我的评估是:

考虑直接从站点提取的 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”。