省市区三级联动选择, 在我们开发中很常见, 下一级的下拉框数据与上一级的下拉框的值紧密相关, 所以需要我们处理的时候格外小心, 及时清理数据, 异步加载数据时再去绑定值不容半点马虎.
我今天给大家分享一个比较通用的Js插件, 虽然叫JQuery插件, 但也只是引用到了它一般的方法, 并非底层. 这个插件除了省市区外, 还可以根据自己的意思灵活配置成你想要的三级联动或二级联动.
插件的下载地址: http://download.csdn.net/download/freshflower/8748521 (赚点小积分, 嘿嘿)
引入Jquery, 再引入插件. 然后我来讲解一下使用方法
// 初始化实例 var obj = $.cascade({ container: { first: '#firstid', second: '#secondid', third: '#thirdid' }, method: 'post', cache: true, local: false, //是否取本地数据: true:则需设置dataJson; false:则需设置dataUrl取服务器上的数据. (推荐取服务器的数据) dataUrl: { first: '/url/province', second: '/url/city?province=', third: '/url/area?city=' }, //这里的URL地址根据你的实际情况设定 field: { first: { text: 'areaname', value: 'areacode' }, second: { text: 'areaname', value: 'areacode' }, third: { text: 'areaname', value: 'areacode' } }, options: { first: { text: 'Please Choose', value: '' }, second: { text: '所有城市', value: '-' }, //在下拉控件上显示"所有城市"的项, 其值为"-" third: { text: '', value: '' } //为空表示只显示数据项 }, startText: ['浙江省', '杭州市', '西湖区'], //起始加载省市区的 startValue: ['10', '100571', '10057103'] //起始加载的值(与startText二选一, 优先使用startValue) }); // 方法调用 可调用的方法就只有这两个, 其他方法为函数内部方法. // 这两个方法主要优点在于一次性设定, 无需考虑异步的情况, 他会自动去处理异步加载. // 1. 设置选中值: obj.setValues(['10', '100571', '10057103']); //依照数组的值依次设定 一级下拉框,二级下拉框, 三级下拉框的值 // 2. 设置选中文本: obj.setTexts(['浙江省', '杭州市']); //依照数组的值依次设定 一级下拉框,二级下拉框的选中文本, (三级下拉框不设定,默认第一个选项)
重点讲根据URL来获取服务器数据, 除一级下拉框对应的数据URL不额外加参数外,另外两个都会根据上一下拉框所选中的值来请求数据, 例如: 省份选择了浙江省, 那么就要拉取浙江省下的所有城市, 这时, dataUrl.second就会将省份中选中的值当成参数向服务器请求数据. (如上下的数据就会得到"/url/city?province=10"这个地址, 同理城市选择了杭州市, 就会得到第三级数据的请求地址: "/url/area?city=100571")
服务器返回数据格式如下, 必须是JSON数组
//获取到所有的省份 //json中的areacode,与areaname字段名称可根据自身的需要写,只要相关配置到初始化时的参数中的field中即可. [ {"areacode": 10, "areaname": "浙江省"}, {"areacode": 11, "areaname": "北京市"}, {"areacode": 12, "areaname": "天津市"}, {"areacode": 13, "areaname": "河北省"}, {"areacode": 14, "areaname": "山西省"}, {"areacode": 15, "areaname": "内蒙古自治区"} //,{...}省略很多 ] //------我---是---分---隔----线------------- //获取到浙江省下面的市的数据, (获取某个城市下的行政区就不用再枚举了,结构是一样的) [ {"areacode": 100570, "areaname": "衢州市"}, {"areacode": 100571, "areaname": "杭州市"}, {"areacode": 100572, "areaname": "湖州市"}, {"areacode": 100573, "areaname": "嘉兴市"}, {"areacode": 100574, "areaname": "宁波市"}, {"areacode": 100575, "areaname": "绍兴市"}, {"areacode": 100576, "areaname": "台州市"}, {"areacode": 100577, "areaname": "温州市"}, {"areacode": 100578, "areaname": "丽水市"}, {"areacode": 100579, "areaname": "金华市"}, {"areacode": 100580, "areaname": "舟山市"} ]
如果你想取本地的数据, 那么在函数初始化时, 必须初始化其本地数据dataJson, 格式如下:
dataJson ={"first": [ /* first必须是数组,所有省份列表 */ {"areacode": 10, "areaname": "浙江省"}, {"areacode": 11, "areaname": "北京市"}, {"areacode": 12, "areaname": "天津市"}, {"areacode": 13, "areaname": "河北省"}, {"areacode": 14, "areaname": "山西省"}, {"areacode": 15, "areaname": "内蒙古自治区"} //,{...}省略很多 ], "second": { /* 枚举所有的城市 */ "10":[{"areacode": 100570, "areaname": "衢州市"},{"areacode": 100571, "areaname": "杭州市"}/*,省略很多, 这里的10指first中areacode=10的项,以其值作为key,那么value就是城市列表的数组 */ ], "11": [{"areacode":11010,"areaname":"北京市"}] }, "third": { /* 枚举出所有城市下所有的地区 */ "100571":[{"areacode": 10057101, "areaname": "上城区"}, {"areacode": 10057102, "areaname": "下城区"}, {"areacode": 10057103, "areaname": "西湖区"}] /* "100572":[{...},{...}], 省略很多很多.... */ } //综合起来,数据量太大了, 不是好事, 所以不推荐使用.
相关推荐
适用于电商项目收货地址选择的三级联动插件,省市县数据很齐全。
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
jQuery模拟select下拉框三级城市联动代码.zip
jQuery基于layui框架制作精美的省市区下拉框三级联动菜单选择,支持三级联动城市选择,点击提交获取选中值代码。
jQuery省市区三级联动下拉框基于jquery-1.8.2.min.js制作,三级联动代码。
jQuery省市区三级联动代码基于jquery.1.12.4.min.js制作,点击弹出下拉框,选择省份、城市、区县。下载即用,和主流网站效果一样。
带select下拉选择框美化的jQuery省市区三级联动插件,网络上很多城市三级联动选择插件,但是 大部分是采用传统的select下拉框选择,本插件利用ul模拟美化select选择框,界面还是很不错的 最终选择的值会赋值到隐藏...
实现效果: jQuery实现select省市区三级联动下拉框,通过选择省,市区的值随之变化,非常适用于企业网站或者商城网站,用户在注册的时候填写的信息。php中文网推荐下载!
jQuery下拉框三级联动插件是一款支持一级数据,二级数据,三级数据,自定义初始值。
使用jQuery基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码。
jQuery解析xml文件,实现省市县三级联动下拉框
jQuery省市区三级联动下拉框基于jquery-1.8.2.min.js制作,三级联动代码。
jquery省市县联动下拉框,jquery省市县联动菜单,经常用这个,很爽,全国城市数据都是最新的
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
插件描述:Select2实现全国省市区三级联动下拉菜单. 参考示例:http://www.jq22.com/jquery-info6009
jQuery省市区三级联动下拉框基于jquery-1.8.2.min.js制作,三级联动代码。
该插件集成二级联动和三级联动,只需要在html页面上简单调整,js便可自动识别加载哪种联动的数据,需要说明的是,二级联动并不是在三级联动基础上删除第三级,而是对于我国的直辖市如北京,重庆等城市的二三级划分做...
jQuery中国省份地图三级联动代码基于jquery-3.1.1.js制作,省市区三级联动代码,下拉框中选择中国省份,在地图上面高亮显示。
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市
用JQuery实现比较容易,代码以省市联动效果为例实现。JSP页面代码如下: 代码如下: ”base”> 生源地:</p> <label> <select id=”provinceCode” name=”provinceCode” onchange=”refreshCity()”> ””>...