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

搜索

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

【技术探讨】

下载

新闻

文章

因工作要用到省市县联动菜单，并且使用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变量里，能完美按赋值自动渲染默认值，如果遇到类似“香港"这种只有一级下拉菜单的，会自动清空后面下拉菜单。因使用了递归原理，其实此脚本可实现无限联动下拉菜单的功能要求。

效果展示：