通过jquery实现省市联动

最新推荐文章于 2023-08-18 18:17:12 发布

原创最新推荐文章于 2023-08-18 18:17:12 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

安卓开发同时被 2 个专栏收录

28 篇文章

订阅专栏

移动

25 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的省市区三级联动效果的具体案例。通过监听省的选择变化来动态更新市的选项，实现了页面元素之间的联动效果。适用于网页表单中需要根据上一级选择动态加载下一级选项的场景。

//定义空数字
				var $sheng = [["西二旗","香山"],["保定","廊坊"]];
				//省的改变事件
				$("#pro").change(function(){
					//当省的下拉框改变时,将市的内容移除
					$("#city option").remove();
					//获得市的select
					var $city = $("#city");
					//找到选择中的值
					var $pro = $("#pro option:checked").val();
					//循环取出数组里的值,添加到option
					for(var i=0;i<$sheng[$pro].length;i++){
						//通过省选择的内容循环查找
						var $cityvalues = $sheng[$pro][i];
						//创建标签并且将循环的内容添加到添option
						var $opt =  $("<option>"+$cityvalues+"</option>");
						//最后添加到select
						$city.append($opt);
					}