jquery实现二级省市联动

最新推荐文章于 2023-07-25 20:38:09 发布

Cyl小丑

最新推荐文章于 2023-07-25 20:38:09 发布

阅读量753

点赞数

分类专栏： jquery实现二级省市联动文章标签： jquery实现二级省市联动

本文链接：https://blog.csdn.net/qq_39376653/article/details/80920911

版权

jquery实现二级省市联动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用JQ实现省市联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
//创建省数组一维
var cal=["广西","广东","湖南","湖北","海南"];

//创建市数组二维
var city=
[
["南宁 ","桂林 ","贺州","北海","玉林"],
["广州","深圳","珠海","佛山","湛江"],
["长沙","湘潭","岳阳","邵阳","张家界","永州"],
["武汉","荆州","宜昌","咸宁","随州"],
["海口","三亚"]
];

//页面加载
$(document).ready(function(){
for(var i=0;i<cal.length;i++){
//创建option节点
var option=new Option(cal[i],cal[i]);
//将节点放入select下
$("#caption").append(option);
}

//一个元素的值改变的时候将触发时间
$("#caption").change(function(){
//获取市下拉列表的值
var calVal=$("#caption").val();

for(var i=0;i<cal.length;i++){
if(cal[i]==calVal){
for(var j=0;j<city.length;j++){
//创建option节点
var option=new Option(city[i][j],city[i][j]);
//将节点放入select下
$("#city").append(option);
}
}
}
});
});
</script>
</head>
<body>
<h1>省市联动</h1>
<select id="caption">
<option value="-1">--请选择--</option>
</select>
<select id="city">
<option value="-1">--请选择--</option>
</select>
</body>
</html>

Cyl小丑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现二级省市联动

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;me
复制链接

扫一扫