JQuery实现省市县三级联动

最新推荐文章于 2025-06-05 11:45:45 发布

原创最新推荐文章于 2025-06-05 11:45:45 发布 · 382 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery的

ĴQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于JavaScript的省市县三级联动选择器实现方案，通过预定义的省份、城市及区县数据，实现了下拉菜单的动态更新。当用户选择省份时，相应的城市列表会自动更新；同样，当选择城市时，区县列表也会随之变化。

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

<select id="sheng">
</select>
<select id="shi">
</select>
<select id="xian">
</select>

var sheng01=["河南","北京","上海"];
var shi01={   "河南":["郑州","驻马店","洛阳"],
              "北京":["大兴","长安"],
              "上海":["黄埔"]
            };
var xian={"郑州":["金水区","二七区"],
          "驻马店":["古城区","驿城区"],
          "大兴":["111","222"]
};

function city () {
    $("#sheng").empty();
    $("#sheng").append("<option>--请选择--</option>");
    for (var i=0;i<sheng01.length;i++) {
        $("#sheng").append("<option>" + sheng01[i] + "</option>");
    }

}


//页面加载完成后触发
$(function(){
city();//展示省
//给省绑定事件,改变省值,则下级也改变
$("#sheng").change(function () {
 			   var s = $("#sheng").val();
    $("#shi").empty();
   			 $("#shi").append("<option>--请选择市--</option>");
   			 var citys = shi01[s];
   		 if (citys!=null) {
      			 for (var i = 0; i < citys.length; i++) {
          		   $("#shi").append("<option>" + citys[i] + "</option>");
          		}
     		}
});

//给市绑定事件
  $("#shi").change(function () {
    var s=$("#shi").val();
    		$("#xian").empty();
   		 $("#xian").append("<option>--请选择县或者区--</option>");
   		 var citys = xian[s];
    		if (citys!=null) {
      			  for (var i = 0; i < citys.length; i++) {
         	 $("#xian").append("<option>" + citys[i] + "		</option>");
    	   	 }
  		  }
})

});