您当前位置:首页 > 文章中心 > SCSCMS > 技术探讨

jQuery EasyUI combobox省市县联动下拉菜单

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-12-14   阅读次数: 1507   查看权限: 游客查看

因工作要用到省市县联动菜单,并且使用jQuery EasyUI combobox实现。

省市县联运菜单使用原生javascript生成select html是非常简单的事。

但要使用jQuery EasyUI combobox实现却要费不劲。制作前查了一些案例都不合要求,不是不会联运就是渲染下拉菜单不完美。于是自己花了一个晚上整出来了:

     $(function(){
	var select_name = ["province","city","district",quot;province1","city1","district1"];//定义省市县对应的name
         for(var i=0;i<select_name.length;i++){
             $("#"+select_name[i]).combobox({
                 valueField:'id',
                 textField:'text',
                 width:160,
                 editable:false
             })
         }
         provinces_select(["province","city","district"],json_date,0);
         provinces_select(["province1","city1","district1"],json_date,0);
     });
    function provinces_select(arr,obj,n){
    if(obj){
        var id=$("input[name='"+arr[n]+"']").val()||0,ck=!1,child;
        for(var i= obj.length;--i>=0;){
            if(obj[i].id == id){
                ck = id;
                child = obj[i].children;
                break;
            }
        }
        if(!ck){
            ck = obj[0].id;
            child = obj[0].children;
        }
        $("#"+arr[n]).combobox({
            data:obj,
            value:ck,
            onSelect: function(rec){
                for(var l= obj.length;--l>=0;){
                    if(obj[l].id==rec.id){
                        var child = obj[l].children;
                        break;
                    }
                }
                provinces_select(arr,child,n+1);
            }
        }).combobox('unselect');
        provinces_select(arr,child,n+1);
    }else{
        for(var k = arr.length-1;k>=n;k--){
            $("#"+arr[k]).combobox({data:[]}).combobox("clear");
        }
    }
}

修改:为了能同一页面多处使用,就禁止更改json原数据属性。

 

为了减轻数据库访问,所以把省市县的json数据存在js变量里,能完美按赋值自动渲染默认值,如果遇到类似“香港"这种只有一级下拉菜单的,会自动清空后面下拉菜单。因使用了递归原理,其实此脚本可实现无限联动下拉菜单的功能要求。

效果展示:

 

 

关键词: combobox联动,easyui,省市县联动下拉菜单   编辑时间: 2014-01-05 19:17:10

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
20%(1)
80%(4)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程