基于AJAX的级联下拉菜单
时间: 2023-12-19 20:06:57 浏览: 31
级联下拉菜单可以让用户在选择一个下拉列表的选项后,自动加载下一个相关的下拉列表。基于 AJAX 技术实现级联下拉菜单可以提高用户体验,避免页面的刷新,下面是一份基于 AJAX 的级联下拉菜单的实现代码示例。
HTML 代码:
```html
<label>国家:</label>
<select id="country">
<option value="">请选择</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
</select>
<label>城市:</label>
<select id="city">
<option value="">请选择</option>
</select>
```
JavaScript 代码:
```javascript
$(function(){
$('#country').change(function(){
var country = $(this).val();
$.ajax({
url: 'getCity.php', // 获取城市列表的 URL
type: 'POST',
dataType: 'json',
data: {country: country},
success: function(data){
var html = '<option value="">请选择</option>';
$.each(data, function(index, city){
html += '<option value="'+city+'">'+city+'</option>';
});
$('#city').html(html);
}
});
});
});
```
PHP 代码:
```php
<?php
// 获取城市列表
$country = $_POST['country'];
if ($country == '中国') {
$cities = array('北京', '上海', '广州', '深圳');
} else if ($country == '美国') {
$cities = array('纽约', '洛杉矶', '芝加哥', '旧金山');
}
echo json_encode($cities);
?>
```
以上代码中,当用户选择国家后,通过 AJAX 请求获取到对应的城市列表,并动态生成下一个下拉菜单的选项。