【Jquery插件】下拉框三级联动选择 省市区三级联动选择

     省市区三级联动选择, 在我们开发中很常见, 下一级的下拉框数据与上一级的下拉框的值紧密相关, 所以需要我们处理的时候格外小心, 及时清理数据, 异步加载数据时再去绑定值不容半点马虎.

      我今天给大家分享一个比较通用的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":[{...},{...}], 省略很多很多.... */
} //综合起来,数据量太大了, 不是好事, 所以不推荐使用.

 

最后再订个例子出来:

<!-- 引入两个必要的JS文件 -->
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="cascade.js"></script>

<div class="span4" style="text-align: right; width: 95%">
    <form action="" id="frompagelist" class="form-horizontal ">
        <span>第一组选择器:</span>
        <select id="p_s" style="width:100px;"></select>
        <select id="p_c" style="width:100px;"></select>
        <select id="p_a" style="width:100px;"></select>

        <span style="margin:0px 20px;"></span>
        <span>第二组选择器:</span>
        <select name="province" style="width:100px;"></select>
        <select class="cityclass" style="width:100px;"></select>
        <select id="a_a" style="width:100px;"></select>

        <input type="button" value="选定浙江省" οnclick="chooseArea()">
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        initAreaSelector()
    });
    
    var secondSelector = null;
    function initAreaSelector(){
        //第一组初始化
        $.cascade({
            container: { first: '#p_s', second: '#p_c', third: '#p_a' },
            dataUrl: {
                first: '/Area/GetArea1',
                second: '/Area/GetArea2?area1=',
                third: '/Area/GetArea3?area2='
            },
            field: {
                first: { text: 'areaname', value: 'areacode' },
                second: { text: 'areaname', value: 'areacode' },
                third: { text: 'areaname', value: 'areacode' }
            },
            options: {
                first: { text: '请选择', value: '' },
                second: { text: '所有城市', value: '' },
                third: { text: '所有地区', value: '' }
            },
            startText: ['广东省', '深圳市', '南山区']
        }); 

        //第二组
        secondSelector = $.cascade({
            container: { first: 'select[name="province"]', second: 'select.cityclass', third: '#p_a' },
            dataUrl: {
                first: '/Area/GetArea1',
                second: '/Area/GetArea2?area1=',
                third: '/Area/GetArea3?area2='
            },
            field: {
                first: { text: 'areaname', value: 'areacode' },
                second: { text: 'areaname', value: 'areacode' },
                third: { text: 'areaname', value: 'areacode' }
            },
            startText: ['江西省', '南昌市', '东湖区'] //也可以用 startValue来代替
        }); 
    }

    function chooseArea(){
        secondSelector.setTexts(['浙江省', '杭州市', '西湖区']);
        // or:
        // secondSelector.setValues(['10', '100571', '10057103']);
    }
</script>

 

最后, 这个插件可以应用到很多三级联动或两级联动选择, 并不局限于省市区的选择, 这里只是拿他来做为一个示例, 希望朋友们多多支持, 有错误的地方, 欢迎提出来.

 本文章为原创,转载请注明出处:  http://freshflower.iteye.com/blogs/2215049