欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

JS实现省市联动效果

发布时间：2024/4/13 javascript 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 JS实现省市联动效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

实现的效果为：当选择一个省的时候，会自动出现该省下的市级

效果图如下：

<body><div><!--界面展示--><span>省份：</span><select id="province" onchange="city()"><option value="" selected="selected">--请选择--</option><option value="beijing" >北京</option><option value="jiangxi" >江西</option><option value="hunan" >湖南</option></select><span>城市：</span><select id="city"><option value="" selected="selected">--请选择--</option></select></div> </body> <script>function city() {//通过Id获取选择的省份var provinceObj = document.getElementById('province');//根据id获取市级标签var cityObj = document.getElementById('city');var selectProvince = provinceObj.value;//根据选择的省份设置市级标签中的内容if(selectProvince == "") {cityObj.innerHTML = '<option value="" selected="selected">--请选择--</option>';} else if(selectProvince == "beijing") {cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝阳区</option>' +'<option value="tiananmen" >天安门</option>' +'<option value="yiheyuan" >颐和园</option>' +'<option value="zijincheng" >紫禁城</option>';} else if(selectProvince == "jiangxi") {cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +'<option value="ganzhou" >赣州</option>' +'<option value="jiujiang" >九江</option>' +'<option value="shangrao" >上饶</option>';} else if(selectProvince == "hunan") {cityObj.innerHTML ='<option value="changsha" selected="selected">长沙</option>' +'<option value="hy" >衡阳</option>' +'<option value="zz" >株洲</option>' +'<option value="sy" >邵阳</option>';} } </script>

 

转载于:https://www.cnblogs.com/web12/p/10171498.html

总结

以上是生活随笔为你收集整理的JS实现省市联动效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。