jquery手机端二级联动
时间: 2024-01-24 08:15:41 浏览: 165
以下是一个使用jQuery实现手机端二级联动的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机端二级联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
$(document).ready(function(){
// 省份数据
var provinceData = {
"北京": ["东城区", "西城区", "朝阳区"],
"上海": ["黄浦区", "徐汇区", "长宁区"],
"广东": ["广州市", "深圳市", "珠海市"]
};
// 省份下拉框改变事件
$("#province").change(function(){
var province = $(this).val();
var cityOptions = "";
// 根据选择的省份获取对应的城市数据
var cities = provinceData[province];
// 生成城市下拉框的选项
for(var i=0; i<cities.length; i++){
cityOptions += "<option value='" + cities[i] + "'>" + cities[i] + "</option>";
}
// 更新城市下拉框的选项
$("#city").html(cityOptions);
});
});
</script>
</body>
</html>
```
该示例中,首先定义了一个省份数据的对象`provinceData`,其中每个省份对应一个城市数组。然后,通过jQuery的`change`事件监听省份下拉框的改变,根据选择的省份获取对应的城市数据,并生成城市下拉框的选项。最后,更新城市下拉框的选项。
阅读全文