Question

我正在使用jquery-ajax来显示多个depandant下拉列表。一切顺利，但我有一个问题，即当没有值选择下拉菜单，那么孩子下拉必须自己隐藏它...但在我的代码中它显示为空。我希望那个孩子下拉列表隐藏..在这方面帮助我..

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("#parent_state").change(function() {

$.get('loadsubcat.php?parent_state=' + $(this).val(), function(data) {
$("#city").html(data);


 });
 });

 });
 /script>

 <?php 
$con=mysql_connect( 'localhost' , '' , ''); 
if($con){
    mysql_select_db('test' , $con);
    //echo "database selected";
}
    ?>
    <form method="post">
        <?php
            $sql= "SELECT * FROM state";
            $rs= mysql_query($sql);

            if(mysql_num_rows($rs) > 0){
                ?>  
                <select name="parent_state" id="parent_state">
                <option value""></option>
                <?php
                while($nrow=mysql_fetch_array($rs)){

       echo "<option value=".$nrow['state_id']. ">".$nrow['state_name']. "</option>";           

        }
?> </select>
            <?php
        }

        ?>


   <select name="city" id="city">
    <option value=""></option>
 </select>



</form>

这是loadsubcat.php

  $parent_state = $_GET['parent_state'];

 $query = mysql_query("SELECT * FROM city WHERE state_id = {$parent_state}");
 if(mysql_num_rows($query)>0){
 while($row = mysql_fetch_array($query)) {
 echo "<option value=".$row['city_id']. ">".$row['city_name']. "</option>";
 }
 }

Answer 1

难道你不能在if条件中移动另一个下拉列表（名称为“city”的下拉列表）吗？有了这个，如果父下拉菜单不存在，孩子也不会。

像这样 -

...
if(mysql_num_rows($rs) > 0){
    ?>  
    <select name="parent_state" id="parent_state">
        <option value""></option>
        <?php
            while($nrow=mysql_fetch_array($rs)){

            echo "<option value=".$nrow['state_id']. ">".$nrow['state_name']. "</option>";           

            }
        ?>
    </select>
        //I've added the child select here.
    <select name="city" id="city">
        <option value=""></option>
    </select>
<?php
}
?>
...

Answer 2

尝试将脚本更改为

<script type="text/javascript">
$(document).ready(function() {

    $("#parent_state").change(function() {
        $("#city").load('loadsubcat.php?parent_state=' + $(this).val());
      });
 });
 </script>

我之前也遇到过$ .get的问题，尝试以这种方式传递数据。如果你坚持使用$ .get，你应该把数据放在json格式中并传递给函数作为参数。请参阅documentation

但在这种情况下，我认为.load是合适的答案

另一件需要注意的事情是，在参数中包含空格会导致问题。处理此问题的一种安全方法是对参数进行编码，即..

$("#parent_state").change(function() {
        params = encodeURI($(this).val());
        $("#city").load('loadsubcat.php?parent_state=' + params);
      });

只有当值来自数据库时才会显示下拉，否则隐藏

2 个答案: