html添加省市县联动下拉框,jQuery省市联动下拉框插件

最近通宵严重，整理一下碎片化的代码，否则真担心一段时间后忘记了什么。

把之前写的省市联动的JQUERY插件重写了一下，记录如下：

完成地址:http://thecdn.sinaapp.com/page/demo/jq-select/

GITHUB地址:https://github.com/soulteary/jquery-city-select

首先建立基础HTML结构：

html:5>div#warp>((select#province>option[value="载入中"])+(select#city>option[value="载入中"]))

预览地址：http://thecdn.sinaapp.com/page/demo/jq-select/step-1.html

载入中

载入中

添加简单的样式。

地址:http://thecdn.sinaapp.com/page/demo/jq-select/step-2.html

#warp{

width: 230px;

height: 80px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -130px;

box-shadow: 1px 1px #3A393A;

border: 1px solid #222;

font-size: 13px;

line-height: 13px;

}

#province{

margin: 30px 0 0 30px;

float: left;

}

#city{

float: right;

margin: 30px 30px 0 0;

}

载入中

载入中

接着来写JS实现。

首先我们要进行数据定义，就是这个省市联动的数据是如何的关系。

有许多的省份，那么省份是包含在一个数组中的，然后每个省份中的城市包含在这些省份中，所以获得包含关系。

定义结构如下：(为了简单的开发，我随意写的数据，真实上线用自己定义的数据来替换即可)

[

{'name':'北京市', id:100000, children:[

{'name':'海淀区', id:100003},

{'name':'西城区', id:100002},

{'name':'东城区', id:100001}

]},

{'name':'天津市', id:300000, children:[

{'name':'北辰区', id:300003},

{'name':'红桥区', id:300002},

{'name':'河西区', id:300001}

]}

];

简单的思考后，插件接受的参数为不定长，1~2个，为什么这么说呢。

场景A:数据要输出到一个下拉框中，即省份和城市输出一起。

场景B:数据分别初始化到两个下拉列表中。

那么设计插件框架如下：

;

(function ($) {

$.fn.extend({

"citylist": function (params) {

params = $.extend({

param:'this is a param'

}, params);

var target = $(this);

if(!target.length){

return this;

}else if(target.length==1){

}else{ <