html+js实现二级省市联动

最新推荐文章于 2023-05-08 14:18:33 发布

小生一枚

最新推荐文章于 2023-05-08 14:18:33 发布

阅读量551

点赞数 3

文章标签： Html js

本文链接：https://blog.csdn.net/qq_45208577/article/details/102684904

版权

html+js实现二级省市联动

在一个页面内实现省市联动

	<head>
		<meta charset="utf-8">
		<title>html+js实现二级省市联动</title>
	</head>
	<body>
	  <select id = "sheng" onchange="showshi(this.value)">
			<!-- 下面是省市选项，需要在这里添加 -->
		    <option value="--请选择--">--请选择--</option>
		    <option value ="河南省">河南省</option>
		    <option value ="河北省">河北省</option>
		    <option value="江苏省">江苏省</option>
		    <option value="山西省">山西省</option>
		</select>
		<select id="shi">
			<option >--请选择--</option>
		</select>
	</body>
	      <script type ="text/javascript">
	           var arr= new Array(4);
	           arr[0]=["--请选择--","--请选择--"];
			   // 首项为省份,其他的是市份
	           arr[1]=["河南省","郑州市","许昌市","新乡市","洛阳市","开封市","信阳市","漯河市","周口市"];
	           arr[2]=["河北省","石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","衡水市"];
	           arr[3]=["江苏省","南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市"];
	           arr[4]=["山西省","太原市","朔州市","大同市","长治市","晋城市","忻州市","晋中市","临汾市"];
	       function showshi(value)
	       {
	           var shi1 = document.getElementById("shi");
	           var opts = shi1.getElementsByTagName("option");
	           for (var a = 0 ;a<opts.length ;a++ )
	           {
	               var opt = opts[a];
	               shi1.removeChild(opt);
	               a--;
	           }
	           for (var i = 0;i<arr.length ;i++ )
	           {
	               var arr1=arr[i];
	               var fristvalue = arr1[0];
	               if (fristvalue==value)
	               {
	                   for (var j=1;j<arr1.length ;j++ )
	                   {
	                       var value1=arr1[j];
	                       //alert(value1);
	                       var option1 = document.createElement("option");
	                       var text1 = document.createTextNode(value1);
	                       option1.appendChild(text1);
	                       shi1.appendChild(option1);
	                   }
	               }
	           }
	       }
	</script>
	</body>

小生一枚

关注

3
点赞
踩
4

收藏

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

html+js实现二级省市联动在一个页面内实现省市联动<head> <meta charset="utf-8"> <title>html+js实现二级省市联动</title></head><body> <select id = "province" onchange="...
复制链接

扫一扫