使用jQuery实现省市区三级联动

100 浏览量更新于2024-09-01 收藏 166KB PDF 举报

本文主要介绍了如何使用jQuery实现省市区三级联动的下拉选择功能，强调了实现该功能的关键点在于jQuery的选择器、遍历及属性操作，以及数据存储的格式和将数据填充到select选项中的方法。作者分享了一个用于获取省份数据并添加到下拉框的示例代码，并建议将相关文件放在Web-Content目录下。在实现省市区三级联动的过程中，首先要考虑的是数据的来源和格式。通常，这些数据可以存储在XML文件中，以便于解析和使用。例如，XML文件可能包含类似以下结构的数据： ```xml <provinces> <prov id="1">广东省</prov> <prov id="2">北京市</prov> ... </provinces> ``` 接下来，我们需要利用jQuery来处理这些数据。在JavaScript文件中，可以编写函数读取XML文件并遍历其中的元素。如`func_suc_getXmlProvince`函数，它使用`find`方法找到所有省份元素，接着通过`each`遍历并使用`eq`和`attr`来获取每个省份的文本和ID，最后将这些信息插入到对应的`<select>`标签中。 HTML页面的基本结构如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市区三级联动</title> <script src="jquery-1.8.3.min.js"></script> <script src="province_city.js"></script> </head> <body> <select id="province" name="province"></select> <select id="city" name="city"></select> <select id="area" name="area"></select> <div>地址选择</div> </body> </html> ``` 在JavaScript文件`province_city.js`中，除了获取省份的函数外，还需要实现根据选中的省份动态加载城市，以及根据城市加载区县的逻辑。这通常通过监听`change`事件，结合之前提到的jQuery方法来实现。例如，当用户选择了一个省份后，会触发一个函数，该函数读取对应省份下的城市数据并更新城市选择框： ```javascript $(document).ready(function() { // 读取并填充省份数据 func_suc_getXmlProvince(province_xml); // province_xml为XML文件内容 $('#province').on('change', function() { var selectedProvinceId = $(this).val(); // 获取并填充城市数据 // ... // 根据城市选择，加载区县数据 // ... }); }); ``` 实现省市区三级联动的关键在于正确解析数据源，有效地使用jQuery进行DOM操作，并结合事件监听来实现联动效果。通过这样的方式，用户可以在前端页面上流畅地选择他们的地址信息。

省市区三级联动省市区三级联动jquery实现代码实现代码

最近项目需要用到关于省市区三级联动下拉选择的功能，于是乎网上搜了一些做法，觉得有一些只是给出了小的案例，却很难找到详细的省、

市、区的具体数据（其实，用baidu搜索就是这样啦），果断用google，搜出来的博文质量相当高，特此记录记录！！！

对于这个效果，其实我发现主要在于两点：1、jquery的筛选遍历操作；2、存储省、市、区这些数据时候的格式。另外一点是如何将获取得到

的数据放到select option中（即下拉框中！）

对于第一个问题的解决，其实熟悉Jquery的博友估计是不难的，主要涉及：find，eq，attr等函数的操作。下面是其中涉及到的一个案例：用

于获取省的所有数据，并将其放到下拉框中：

function func_suc_getXmlProvice(xml) {

//jquery的查找功能

var sheng = $(xml).find("prov");

//jquery的遍历与查询匹配 eq功能,并将其放到下拉框中

sheng.each(function(i) {

province.append("<option value=" + i + ">"

+ sheng.eq(i).attr("text") + "</option>");

});

}

下面进入正题，建立一个动态web工程，然后将下面讲到的html、js文件、存放省市区xml文件都放在Web-Contetn下即可。首先看一看前端

html文件province_city_select.html：

<!DOCTYPE html>

<html>

<head>

<title>省市区三级联动</title>

</head>

<body>

</select>

</select>

</select>

<div>

地址是：<span id="pro_city"></span> <input id="txtProCity" type="text" />

</div>

</body>

</html>

然后注意放进jquery-1.8.3.min.js，可以来我这里下来：jquery库文件。然后需要新建province_city.js，其源码如下：

$(function() {

var address = $("#pro_city");

var province = $("#province");

var city = $("#city");

var area = $("#area");

var preProvince = "<option value=\"\">选择省（市）</option>";

var preCity = "<option value=\"\">选择市（区）</option>";

var preArea = "<option value=\"\">选择区（县）</option>";

//初始化

province.html(preProvince);

city.html(preCity);

area.html(preArea);

//文档加载完毕:即从province_city_select_Info.xml获取数据,成功之后采用

//func_suc_getXmlProvice进行省的解析

$.ajax({

type : "GET",

url : "province_city_select_Info.xml",

success : func_suc_getXmlProvice

});

//省下拉选择发生变化触发的事件

province.change(function() {

//province.val() : 返回是每个省对应的下标,序号从0开始

if (province.val() != "") {

city.html(preCity);

//根据下拉得到的省对于的下标序号,动态从从province_city_select_Info.xml获取数据,成功之后采用

//func_suc_getXmlProvice进行省对应的市的解析

$.ajax({

type : "GET",

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38621272

粉丝: 3
资源: 957

使用jQuery实现省市区三级联动

省市区三级联动jQuery实现详解及代码示例

实现省市区三级联动的jQuery代码包

手机端购物网站省市区三级联动jQuery特效

省市区三级联动jquery+php

省市区三级联动 jquery.zip

jQuery省市区三级联动菜单特效代码

jQuery省市区三级联动下拉框特效代码

jQuery手机省市区三级联动城市选择代码

jQuery中国省市区三级联动特效特效代码

实现中国省市区三级联动的jQuery特效代码

最新资源