JavaScript 实现简单二级联动

最新推荐文章于 2022-09-28 19:29:07 发布

原创最新推荐文章于 2022-09-28 19:29:07 发布 · 562 阅读

CC 4.0 BY-SA版权

这篇博客展示了如何利用JavaScript实现在网页中创建二级联动的下拉菜单，即根据用户选择的省份动态加载对应的城市列表。代码示例中，当用户在省份下拉菜单中选择省份后，城市下拉菜单会自动更新对应省内的城市选项。具体实现通过监听省份选择的变化，根据不同省份值填充城市列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <body>
     省份：
	 <select id="province">
	 	<option value="">请选择</option>
		<option value="吉林省">吉林省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="山东省">山东省</option>
    </select>
	城市:
	<select id="city">
    	<option value="">请选择</option>
    </select>
	 </select>
  </body>
     <script type="text/javascript">
     	 document.getElementById("province").onchange=function(){
		 	    var city= document.getElementById("city");
				var options=city.getElementsByTagName("option");
				var len=options.length;
				for(var z=1;z<len;z++){
					city.removeChild(options[1]);
				}
				
				var provinceValue = this.value;
				var cityArr;
		     if(provinceValue=="吉林省"){
					cityArr = ["长春市","吉林市","四平市","松原市","通化市"];
				
				}else if(provinceValue=="辽宁省"){
				//3 为辽宁省定制城市列表
				cityArr = ["沈阳市","大连市","铁岭市","抚顺市","丹东市"];
			 }else if(provinceValue=="山东省"){
				//3 为山东省定制城市列表
				cityArr = ["青岛市","济南市","烟台市","潍坊市","威海市"];
			  }
			for(var i=0;i<cityArr.length;i++){
				var option=document.createElement("option");
				option.setAttribute("value",cityArr[i]);
				var text = document.createTextNode(cityArr[i]);
				option.appendChild(text);
				city.appendChild(option);
			}
		 }
     </script>