JQ实现省市区三级联动

最新推荐文章于 2024-11-25 14:24:24 发布

原创最新推荐文章于 2024-11-25 14:24:24 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jq 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个实用的城市选择器插件，通过简单的HTML结构配合jQuery实现省市区三级联动选择的功能，并提供了完整的示例代码及按钮点击事件处理方法。

插件下载地址https://www.jq22.com/jquery-info8054

<div id="distpicker5" style="display:inline-block;">
      <select id="eprovinceName" data-province="请选择" name="provinceName"></select>
      <select id="ecityName" data-city="请选择" name="cityName"></select>
      <select id="edistrictName" data-district="请选择" name="districtName"></select>
  </div>

<input type='button'  value="提交"  id='tijiao'>

<script  type="text/javascript">
        $("#tijiao").click(function () {
		var province = $("#eprovinceName").find("option:selected").text();  
		var city = $("#ecityName").find("option:selected").text();  
		var district = $("#edistrictName").find("option:selected").text();  
		console.log(province);
		console.log(city);
		console.log(district);
	});	
</script>

这个获取选择的城市可以试一试
在这里插入图片描述
这个id值可以根据自己需求选择可以看下插件文档，还有插件中main.js中定义的。

<script src="../js/jquery-1.9.1.min.js"></script>
<script src="js/distpicker.data.js"></script>
 <script src="js/distpicker.js"></script>
 <script src="js/main.js"></script>

直接引入就可以了

在这里插入图片描述