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

Github代码已经更新,如使用插件,请参考最新代码。

把之前写的省市联动的JQUERY插件重写了一下,记录如下: jquery-select-box

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

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

首先建立基础HTML结构:

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

添加简单的样式。

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

接着来写JS实现。 首先我们要进行数据定义,就是这个省市联动的数据是如何的关系。 有许多的省份,那么省份是包含在一个数组中的,然后每个省份中的城市包含在这些省份中,所以获得包含关系。 定义结构如下:(为了简单的开发,我随意写的数据,真实上线用自己定义的数据来替换即可)

简单的思考后,插件接受的参数为不定长,1~2个,为什么这么说呢。 场景A:数据要输出到一个下拉框中,即省份和城市输出一起。 场景B:数据分别初始化到两个下拉列表中。 那么设计插件框架如下:

接着来写实现代码: 地址:http://thecdn.sinaapp.com/page/demo/jq-select/step-3.html 首先是将省市数据初始化到两个不同的列表中的功能的实现,即:

$('#province , #city').citylist();

接着我们继续写单独SELECT BOX的功能。 首先修改HTML结构,添加一个元素作为合并输出数据的容器。可以这么做:

当然,为了有较好的心情去写实现代码,我们需要把CSS也写一下:

接着开始写实现代码:

完整实现代码: 地址:http://thecdn.sinaapp.com/page/demo/jq-select/step-4.html

最后,把CSS,JS独立出页面即可。

当然,这里多添加了一个小功能,如果使用者定义的数据不是id,name,children这样的键,或者不想使用DATA-EXTRA来保存数据,那么一样可以使用这个小插件。