文档章节

JQuery实现省份三级下拉框功能

 哎呀妈呀
发布于 2016/03/18 12:00
字数 575
阅读 25
收藏 0

JQuery实现省份三级下拉框功能

直接上代码:

调用:

//绑定城市下拉选
$("#city_1").citySelect({
    prov:"北京",
    city:"东城区",
    dist:"",
    required:true,
    nodata:"none"
});


HTML:
               <div id="city_2">
                         <select class="prov"></select>
                         <select class="city" disabled="disabled"></select>
                         <select class="dist" disabled="disabled"></select>
                    </div>
js:
/*
 三级省市联动
settings 参数说明
-----
prov:默认省份
city:默认城市
dist:默认地区(县)
nodata:无数据状态
required:必选项
------------------------------ */
$.fn.citySelect=function(settings){
    if(this.length<1){ return;};
    // 默认值
    settings=$.extend({
        prov: null,
        city: null,
        dist: null,
        nodata: null,
        required: true
    },settings);

    var box_obj= this;
    var prov_obj=box_obj.find( ".prov");
    var city_obj=box_obj.find( ".city");
    var dist_obj=box_obj.find( ".dist");
    var prov_val=settings.prov;
    var city_val=settings.city;
    var dist_val=settings.dist;
    var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>" ;
    var city_json;

    // 赋值市级函数
    var cityStart= function(){
         var prov_id=prov_obj.get(0).selectedIndex;
         if(!settings.required){
            prov_id--;
        };
        city_obj.empty().attr( "disabled",true );
        dist_obj.empty().attr( "disabled",true );

         if(prov_id<0||typeof(city_json.citylist[prov_id].c)== "undefined"){
             if(settings.nodata=="none" ){
                city_obj.css( "display","none" );
                dist_obj.css( "display","none" );
            } else if (settings.nodata=="hidden"){
                city_obj.css( "visibility","hidden" );
                dist_obj.css( "visibility","hidden" );
            };
             return;
        };
        
         // 遍历赋值市级下拉列表
        temp_html=select_prehtml;
        $.each(city_json.citylist[prov_id].c, function(i,city){
            temp_html+= "<option value='"+city.n+"'>"+city.n+ "</option>";
        });
        city_obj.html(temp_html).attr( "disabled",false ).css({"display" :"" ,"visibility" :"" });
        distStart();
    };

    // 赋值地区(县)函数
    var distStart= function(){
         var prov_id=prov_obj.get(0).selectedIndex;
         var city_id=city_obj.get(0).selectedIndex;
         if(!settings.required){
            prov_id--;
            city_id--;
        };
        dist_obj.empty().attr( "disabled",true );

         if(prov_id<0||city_id<0||typeof(city_json.citylist[prov_id].c[city_id].a)== "undefined"){
             if(settings.nodata=="none" ){
                dist_obj.css( "display","none" );
            } else if (settings.nodata=="hidden"){
                dist_obj.css( "visibility","hidden" );
            };
             return;
        };
        
         // 遍历赋值市级下拉列表
        temp_html=select_prehtml;
        $.each(city_json.citylist[prov_id].c[city_id].a, function(i,dist){
            temp_html+= "<option value='"+dist.s+"'>"+dist.s+ "</option>";
        });
        dist_obj.html(temp_html).attr( "disabled",false ).css({"display" :"" ,"visibility" :"" });
    };

    var init= function(){
         // 遍历赋值省份下拉列表
        temp_html=select_prehtml;
        $.each(city_json.citylist, function(i,prov){
            temp_html+= "<option value='"+prov.p+"'>"+prov.p+ "</option>";
        });
        prov_obj.html(temp_html);

         // 若有传入省份与市级的值,则选中。(setTimeout为兼容IE6而设置)
        setTimeout( function(){
             if(settings.prov!=null){
                prov_obj.val(settings.prov);
                cityStart();
                setTimeout( function(){
                     if(settings.city!=null){
                        city_obj.val(settings.city);
                        distStart();
                        setTimeout( function(){
                             if(settings.dist!=null){
                                dist_obj.val(settings.dist);
                            };
                        },1);
                    };
                },1);
            };
        },1);

         // 选择省份时发生事件
        prov_obj.bind( "change",function (){
            cityStart();
        });

         // 选择市级时发生事件
        city_obj.bind( "change",function (){
            distStart();
        });
    };

    // 设置省市json数据
    city_json = CommonData.cityData;
    init();
};
CSS:
select {
/*  appearance   将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background:url(../images/select_arrow.png)  no-repeat  scroll  right  center  transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right:14px;
width:148px;
height:30px;
/* 重写边框,使在各个浏览器下拉选边框样式保持一致 */
border:1px solid #ccc;
/* 字体颜色 */
color:#999999;
}


© 著作权归作者所有

粉丝 0
博文 1
码字总数 575
作品 0
海淀
私信 提问
JQuery Ajax实现Select多级关联动态绑定数据

关于JQuery选择插件的使用在这里有些心得和大家分享一下,希望能帮到大家。 jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很...

海岸线的曙光
2018/10/25
99
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
42
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
617
6
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
47.5K
13
jQuery Widgets —— 多组件 jQuery 插件库

jQuery Widgets 是一套基于 jQuery 或 JavaScript 的插件库 — 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件。...

王练
2016/11/23
25
0

没有更多内容

加载失败,请刷新页面

加载更多

Leetcode PHP题解--D118 350. Intersection of Two Arrays II

D118 350. Intersection of Two Arrays II 题目链接 350. Intersection of Two Arrays II 题目分析 返回给定两个数组的交集。 思路 从数量较多的那个数组开始去另一个数组寻找是否元素存在,...

skys215
16分钟前
2
0
从源码上分析Android View保存数据状态

在Android开发旅途中,经常会遇到系统控件无法满足我们的视觉,交互效果,这个时候我们常常需要自己自定义控件来满足我们的需求。在这个开发探索过程中,我们不可避免得遇到View要保存状态信...

shzwork
17分钟前
2
0
请问AD603AQ和AD603AR有什么区别?

  AD603AQ和AD603AR只是在封装上的区别,前者是双列直插式,后者是贴片式,AD603A系列的温度都是在—40摄氏度到+85摄氏度之间,AD603还有一个系列是AD603S,它的温度是在—55摄氏度到+125摄...

仙溪
18分钟前
2
0
Linux /etc/profile 配置文件修改

1. 执行命令: vi /etc/profile 去类似windows 配置环境变量, 2.修改完,立即生效命令: source /etc/profile

kuchawyz
19分钟前
3
0
对于小白来说素描怎么入门?怎么学习?

素描初学者怎样入门?初学者怎样才能画好素描绘画?画好素描绘画有哪些技巧?想必这些问题都是绘画初学者们比较伤脑筋的问题,那么初学者到底怎样才能画好素描绘画呢?今天收集整理了关于素描...

huihuajiaocheng
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部