PHP动态联动下拉菜单：如何获取选中的州/城市值？

我来帮你搞定这个问题！你现在的核心问题是动态生成的城市下拉菜单无法触发事件获取选中值，另外现有代码里还有个小bug，咱们一步步修正：

首先修复现有代码的小问题 #

你前端jQuery里获取选中国家的代码写错了：

// 原来的错误代码
var selectedCountry = $("country option:selected").val();
// 应该改成（因为country是class选择器，需要加.）
var selectedCountry = $(".country option:selected").val();

另外你的PHP代码最后多了一行echo $country;，这会导致生成的城市下拉后面直接显示国家值（比如选USA后会显示usa），建议删掉这行。

实现获取城市选中值的功能 #

因为城市下拉是AJAX动态生成的，不能直接给它绑定change事件，必须用事件委托（把事件绑定到已存在的父元素或document上）。具体步骤：

1. 在页面里加一个用来展示选中城市的区域（比如在表单里加一行）
2. 给动态生成的城市下拉绑定委托事件，获取选中值并展示

修改后的完整前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Populate City Dropdown Based on Country Selected</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 国家下拉切换事件
    $(".country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "post_request.php",
            data: { country : selectedCountry }
        }).done(function(data){
            $("#response").html(data);
        });
    });

    // 事件委托：监听动态生成的城市下拉的change事件
    $(document).on('change', '.state', function(){
        var selectedCity = $(this).val();
        // 把选中的城市名称展示出来，这里可以改成你需要的逻辑（比如赋值给隐藏域、提交表单等）
        $("#selected-city-info").text("你选中的城市是：" + selectedCity);
    });
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Country:</label>
<select class="country">
<option value="">Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
<td id="response">
<!--Response will be inserted here-->
</td>
</tr>
<!-- 添加展示选中城市的行 -->
<tr>
<td colspan="2">
<div id="selected-city-info"></div>
</td>
</tr>
</table>
</form>
</body>
</html>

修改后的PHP代码（post_request.php）

<?php
if(isset($_POST["country"])){
    // Capture selected country
    $country = $_POST["country"];
    // Define country and city array
    $countryArr = array(
        "usa" => array("New York", "Los Angeles", "California"),
        "india" => array("Mumbai", "New Delhi", "Bangalore"),
        "uk" => array("London", "Manchester", "Liverpool")
    );
    // Display city dropdown based on country name
    if(!empty($country) && $country !== ''){
        echo "<label>City:</label>";
        echo "<select id='state' class='state'>";
        foreach($countryArr[$country] as $value12){
            echo "<option value='$value12'>". $value12 . "</option>";
        }
        echo "</select>";
    }
}
// 删掉原来的echo $country;
?>

说明 #

• 事件委托的原理：因为动态生成的.state下拉在页面初始化时不存在，所以直接绑定$(".state").change()是无效的。用$(document).on('change', '.state', function(){...})可以监听所有后续生成的.state元素的change事件。
• 你可以根据需求修改获取城市值后的逻辑：比如把值存入隐藏<input>域，方便表单提交；或者发送AJAX请求到后端等。

内容的提问来源于stack exchange，提问作者rashmi sm