JS省市区联动 - 爱码网

JS省市区使用文档

一：服务器返回JSON格式要求如下网址里面data的格式：(拿KISSY组件data格式来做的)

http://gallery.kissyui.com/cityselector/doc/linkage-data.js

二：使用时，页面head部分需要引入jquery和省市区JS，依赖于HTML结构如下：

属性说明：

id：下拉框dom节点(页面上是唯一的)，用于js初始化的钩子。

data-code: 初始化页面时可以根据省市区的编码来指定那个省份，市及区来显示。比如我想指定 "吉林省长春市朝阳区" 页面默认显示的话，我们可以在HTML结构上加相对应的data-code编码来指定，比如如下：

页面一打开的时候如下显示：

JS省市区联动

三：省市区JS初始化的方法如下：

var selectVal = new CitySelect({

data : data,

provId : "#prov4",

cityId : '#city4',

areaId : '#area4'

});

属性说明如下：

data: data配置项是指后台返回的json数据的保存的全局变量。

provId 指省份下拉框select的id。

cityId 指城市下拉框select的id。

areaId 指区下拉框select的id。

省市区id传参方式：都是以 #XXX的.

省市区基本的配置项如下：

data: 指后台返回的JSON数据。

provId：省份下拉框select的id。

cityId：指城市下拉框select的id。

areaId: 指区下拉框select的id。

isSelect: 默认为true 选择第一项如果页面有指定省市区项时，就显示指定项。如果false，就选中 "请选择"

provCallBack: 省份下拉框渲染完成后的回调函数。

cityCallBack：市下拉框渲染完成后的回调函数。

areaCallBack：区下拉框渲染完成后的回调函数。

demo演示：

一：默认的HTML结构如下：

JS代码初始化的方式如下：

var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});

打开页面后，页面显示如下：

JS省市区联动

1. 可以看到，页面一打开的时候默认显示第一项北京，我们也可以根据省市区切换其他省份去，可以看到上面的gif图时，下面的select中的属性data-code也跟着变化，如果省份切换到请选择下拉框时候，那么省市区中的data-code变为-1，且市，区不可选择，只能是请选择下拉框。

2. 当有省份时候，我切换市到 "请选择"项时候那么区也变为请选择相应的市和区 select中的data-code 值变为-1。其中data-code 就是form表单提交时候需要的。也就是说某某省份下的所有市和所有区。

3. 当同时有省，市的时候，我区也可以change，那么当选择其他的区的时候 data-code也同时变化，当切换到请选择的时候那么value为-1，也就是说是某某省某某市下面的所有区。

二：第二种就是假如页面一初始化的时候我想指定某某省某某市某某区的时候，要如何编写HTML结构呢，比如像下面的图上一样。

JS省市区联动

我们可以在select框加上data-code属性来指定，如下：

JS省市区联动

注意：如果我指定了省份是：浙江省，市：不是浙江省里面的市，那么选中的市是浙江省的默认的第一个市，同理区也一样。

三：第三种初始化是：通过配置项 isSelect 来配置的，默认此配置项为true，如果没有指定省市区的话，那么默认选种第一项，如果有指定省市区的话，那么显示指定的省市区。如果 isSelect 配置项为false的话，那么默认显示是请选择下拉框。可以看下代码如下判断！

JS省市区联动

我们也可以看看gif图显示的。

JS省市区联动

如上gif图所示：默认显示都是 "请选择"下拉框，data-code都为-1，当选择某某省时候 data-code值变化，但是相对应的 "市" 和 "区" 还是请选择下拉框，同理当选中某项市的时候，select中的属性data-code也相应的变化，但是区下拉框还是"请选择"下拉框。当选择区某项的时候 data-code也相应的变化。

JS初始化方式如下，只需要增加一个配置项 isSelect:false即可，如下：

var selectVa2 = new CitySelect({
data : data,
provId : "#prov5",
cityId : '#city5',
areaId : '#area5',
isSelect: false
});

下面是所有的HTML代码如下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script src="js/city2.js"></script>
  <script type="text/javascript" src="js/citySelect2.js"></script>
  <title>Document</title>
 </head>
 <body>

    <div id="city_4">
          <select class="prov" id="prov4" data-code ="220000"></select> 
        <select class="city" id="city4" data-code ="220100"></select>
        <select class="dist" id="area4" data-code ="220104"></select>
    </div>

    <div id="city_5">
          <select class="prov" id="prov5">
            
        </select> 
        <select class="city" id="city5"></select>
        <select class="dist" id="area5"></select>
    </div>
    <script>
            
            var selectVal = new CitySelect({
                data   : data,
                provId : "#prov4",
                cityId : '#city4',
                areaId : '#area4'
            });
            
                
            var selectVa2 = new CitySelect({
                data   : data,
                provId : "#prov5",
                cityId : '#city5',
                areaId : '#area5',
                isSelect: false
            });
            
    </script>
 </body>
</html>

View Code