jQuery - 小鸟系列之下拉联动效果

最新推荐文章于 2019-02-18 22:31:50 发布

原创最新推荐文章于 2019-02-18 22:31:50 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #城市二级联动 #jquery联动

jQuery 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文介绍了一个基于jQuery的城市选择插件实现，该插件能够根据省份自动填充对应的城市选项，并支持初始化时设置默认省份和城市。

jquery插件代码

;(function ($) {
    $.fn.extend({
        "initcity":function(settings){
            var selectid = this.selector;
            var selectprov = selectid+" .prov";  //省的select
            var selectcity = selectid+" .city";  //市的select
            //参数
            var sysParas = {
                provalue:null,    //省值
                cityvalue:null    //市值
            };

            //赋值
            $.extend(sysParas,settings);

            //获取下拉列表数据
            var provcitylist = getOptionData();

            $.each(eval(provcitylist), function (i, item) {
                $(selectprov).append("<option value='" + item.n + "' >" + item.n + "</option>");
            });

            //选择省下拉触发
            $(selectprov).change(function () {
                //获取省下拉选择的选中下标
                var provindex = $('option:selected', selectprov).index()

                $(selectcity).empty();
                $.each(eval(provcitylist)[provindex].citylist, function (i, item) {
                    $(selectcity).append("<option value='" + item.n + "' >" + item.n + "</option>");
                });
            });

            //绑定selectprov
            if (sysParas.provalue!=null) {         
                $(selectprov).val(sysParas.provalue);
            };

            //刷新selectcity
            $(selectprov).change();

            //绑定selectcity
            if (sysParas.cityvalue!=null) {         
                $(selectcity).val(sysParas.cityvalue);
            };

        }
    });

    
    function getOptionData(){
        var provcitylist = [
            {
                "n":'全部',
                citylist:[{"n":' 全部'}]
            },{
                "n": '安徽', 
                citylist: [{ "n": '安庆' },{ "n": '蚌埠' },{ "n": '亳州' },{ "n": '巢湖' },{ "n": '滁州' }]
            },{
                "n": '澳门', 
                citylist: [{ "n": '大堂区' },{ "n": '氹仔' },{ "n": '风顺堂区' },{ "n": '花地玛堂区' }]
            },{
                "n": '北京', 
                citylist: [{"n":"昌平"},{"n":"朝阳"},{"n":"东城"},{"n":"大兴"},{"n":"房山"},{"n":"丰台"}]
            },{
                "n": '重庆', 
                citylist: [{"n":"北碚"},{"n":"巴南"},{"n":"璧山"},{"n":"城口"},{"n":"长寿"},{"n":"大渡口"}]
            }];

        return provcitylist;
    }
})(jQuery);

HTML代码

<body>

<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript" src="wxcity.js"></script>
<script type="text/javascript">
   $(function(){
   		//$("#citylist").initcity();  //不设置值
   		$("#citylist").initcity({
   			provalue:'北京',
   			cityvalue:'东城'
   		});
   });
</script>
 
 <span id="citylist">
 地区标签:
 <select class="prov"  >
 </select>
 <select class="city"  ></select>
 </span>

</body>

数据是以微信地区选择为例

完整代码下载地址：完整例子下载