【问题标题】：dropdown based on previous dropdown基于上一个下拉菜单的下拉菜单
【发布时间】：2014-08-04 13:46:25
【问题描述】：

我正在尝试为州、城市和邮编创建一个级联下拉菜单。我的一部分工作就像当用户选择一个州时会出现相应的城市列表，但是当用户选择一个城市时没有拉链出现。不知道我错过了什么或做错了什么。有人可以帮我解决这个问题吗？

index.php

<?php
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
include("connection.php");
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="container">
  <div id="body">
    <div id="dropdowns">
       <div id="center" class="cascade">
          <?php
        $sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
        $query = mysqli_query($con, $sql);
        ?>
            <label>State:
            <select name="state" id = "state">
              <option value="">Please Select</option>
              <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
              <option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
              <?php } ?>
            </select>
            </label>
          </div>

        <div class="cascade" id="city"></div> 

          <div id="zip" class="cascade"></div> 
        </div>
    </div>
  </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#state").change(function(){

    var state =  $("select#state option:selected").attr('value'); 
    //alert(state); 
    $("#city").html( "" );
    $("#zip").html( "" );
    if (state.length > 0 ) { 
        //alert(state.length);
     $.ajax({
            type: "POST",
            url: "fetch_state.php",
            data: "state="+state,
            cache: false,
            beforeSend: function () { 
                $('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#city").html( html );
            }
        });
    } 
});

$("select#city").change(function(){

    var city = $("select#city option:selected").attr('value');
   // alert(state_id);
    if (city.length > 0 ) { 
     $.ajax({
            type: "POST",
            url: "fetch_city.php",
            data: "city="+city,
            cache: false,
            beforeSend: function () { 
                $('#zip').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#zip").html( html );
            }
        });
    } else {
        $("#zip").html( "" );
    }
});


});
</script>
</body>
</html>

fetch_state.php

<?php

include("connection.php");
//var_dump($_POST);
$state = trim(mysqli_escape_string($con, $_POST["state"]));

$sql = "SELECT DISTINCT city FROM tbl_zip WHERE state = '".$state ."' ORDER BY city";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>City: 
<select name="city" id="city">
    <option value="">Please Select</option>
    <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
    <option value="<?php echo $rs["city"]; ?>"><?php echo $rs["city"]; ?></option>
    <?php } ?>
</select>
</label>
<?php 
    }

?>

fetch_city.php

<?php

include("connection.php");
$city = trim(mysqli_escape_string($con, $_POST["city"]));

$sql = "SELECT DISTINCT zip FROM tbl_zip WHERE city = '".$city ."' ORDER BY zip ASC";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>zip: 
<select name="zip" id="zip">
    <option value="">Please Select</option>
    <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
    <option value="<?php echo $rs["zip"]; ?>"><?php echo $rs["zip"]; ?></option>
    <?php } ?>
</select>
</label>
<?php 
    }

?>

【问题讨论】：

当您分配事件处理程序时，看起来 select#city 不存在，并且每次有人选择一个状态时您都会覆盖整个城市元素。您需要重新分配处理程序或使用承诺，或者不要在每次发生更改时都替换所有 html。
将$("select#city").change(function(){ 更改为$(document).on('change', "select#city",(function(){，因为您尝试将动态添加的元素绑定到DOM。因为当 DOM 准备好时它不存在，所以它没有绑定。
Event binding on dynamically created elements? 的可能重复项
肖恩，非常感谢，工作完美！！！

标签： php jquery ajax

【解决方案1】：

这是链接，我认为这会有所帮助：

http://www.91weblessons.com/php-ajax-country-state-city-drop-down/

happyCoding :D

【讨论】：

【解决方案2】：

移动 javascript 代码

$("select#city").change(function(){

var city = $("select#city option:selected").attr('value');
// alert(state_id);
if (city.length > 0 ) { 
 $.ajax({
        type: "POST",
        url: "fetch_city.php",
        data: "city="+city,
        cache: false,
        beforeSend: function () { 
            $('#zip').html('<img src="loader.gif" alt="" width="24" height="24">');
        },
        success: function(html) {    
            $("#zip").html( html );
        }
    });
} else {
    $("#zip").html( "" );
}
});

在fetch_state.php文件沿生成select。

【讨论】：