如何使用 jQuery 根据在地区下拉列表中选择的选项填充状态下拉列表
答案：使用jQuery ajax()方法
根据用户在地区下拉列表中选择的选项值填充州或城市下拉列表是您在填写注册表时在许多网站上看到的 Ajax 功能的一种非常常见的实现。 您可以通过 jQuery ajax() 方法以及任何服务器端脚本语言（如 PHP）的少量帮助轻松完成此操作。
让我们看一下以下示例，以了解其基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.asp",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Country:</label>
<select class="country">
<option>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>
</table>
</form>
</body>
</html>上面的 jQuery 脚本将在地区下拉列表中选择的选项的值发送到服务器。 然后服务器上的"process-request.php"文件处理请求，如果请求成功，jQuery 脚本接收返回的数据并创建城市下拉列表。
"process-request.php"文件中的 PHP 代码如下所示：
示例
Download<?php
if(isset($_POST["country"])){
// Capture selected country
$country = $_POST["country"];
// 定义地区和城市数组
$countryArr = array(
"usa" => array("New Yourk", "Los Angeles", "California"),
"india" => array("Mumbai", "New Delhi", "Bangalore"),
"uk" => array("London", "Manchester", "Liverpool")
);
// 根据地区名称显示城市下拉菜单
if($country !== 'Select'){
echo "<label>City:</label>";
echo "<select>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
}
?>我们创建了一个简单的 PHP 数组来存储地区和城市记录以用于演示目的。 但是，在现实世界的场景中，您需要将这些记录存储在数据库中。 请查看 PHP 和 MySQL 教程 部分，了解如何从数据库中插入和检索记录。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements