jquery+ligerform三级联动下拉框

如下为ligerform里的三级联动下拉框:

 var formData=[
         {display:"县区",name:"QY",newline:true,labelWidth:100,width:220,space:50,type:"select",group:"区域信息",groupicon:"@Url.Content("~/Content/icons/32X32/communication.gif")",comboboxName:"QYName",options:{valueFieldID:"QY" }}, 
         {display:"镇/街道",name:"ZHEN",newline:false,labelWidth:100,width:220,space:50,type:"select",comboboxName:"ZHENName",options:{valueFieldID:"ZHEN"}},
         {display:"村/道路",name:"CUN",newline:true,labelWidth:100,width:220,space:50,type:"select",comboboxName:"CUNName",options:{valueFieldID:"CUN"}}]           
        
         //创建表单结构
         var mainform = $("#mainform");  
         mainform.ligerForm({ 
             inputWidth: 280,
             fields: formData,
             toJSON:JSON2.stringify
         })

需求:加载页面时,加载“县区”下拉框;选择县区后,加载“镇/街道”下拉框;选择镇/街道后,加载“村/道路”下拉框。

代码如下:

        //加载区域下拉框
        $.getJSON(rootPath1+ 'CaseInfoFC/GetAreasForSelect?idfield=id&textfield=text&where='+ JSON2.stringify({
            op: 'and',
            rules: [{ field: 'ParentCode', value: '4413', op: 'equal' }]  //4413-一级区域的parentcode
        }) , 
            function(json){ 
                var newData = new Array();
                for (i = 0; i < json.length; i++)
                {
                    newData.push(json[i]);
                }
                liger.get("QYName").setData(newData); 
            }); 


        //选择区域后,加载镇/小区下拉框
         $("#QYName").ligerComboBox({ onSelected: function (newvalue)
         {
             if(newvalue==null) return; 
             var newData = new Array();
             $.getJSON(rootPath1+ 'CaseInfoFC/GetAreasForSelect?idfield=id&textfield=text&where='+ JSON2.stringify({
                 op: 'and',
                 rules: [{ field: 'ParentCode', value: newvalue, op: 'equal' }] 
             }) , 
            function(json){              
                for (i = 0; i < json.length; i++)
                {
                    newData.push(json[i]);
                }
                liger.get("ZHENName").setData("");
                //liger.get("ZHENName").selectValue(null);//注释掉,否则加载不到后台传过来的值
                liger.get("ZHENName").setData(newData);
            })
         }});


        //选择镇/街道后,加载村/小区/道路下拉框
         $("#ZHENName").ligerComboBox({ onSelected: function (newvalue)
         {
             if(newvalue==null) return; 
             var newData = new Array();
                 $.getJSON(rootPath1+ 'CaseInfoFC/GetAreasForSelect?idfield=id&textfield=text&where='+ JSON2.stringify({
                     op: 'and',
                     rules: [{ field: 'ParentCode', value: newvalue, op: 'equal' }] 
                 }) , 
           function(json){              
               for (i = 0; i < json.length; i++)
               {
                   newData.push(json[i]);
               }
               liger.get("CUNName").setData(""); 
              // liger.get("CUNName").selectValue(null);
               liger.get("CUNName").setData(newData);
           })
         }});


需求2:把三级下拉框选中值保存到某一个表,以后打开详情页时,读取这个表中保存的下拉框选中的值,初始化下拉框。

该需求也是涉及到select初始化问题,与上一篇的要求2 http://www.cnblogs.com/goodgirlmia/p/4165216.html 同理可得,这里就再重复了。

 

关于ligerform的select的取值与赋值,见之前发的帖子:http://www.cnblogs.com/goodgirlmia/p/4164878.html

posted @ 2014-12-15 17:03  goodgirlmia  阅读(1533)  评论(1编辑  收藏  举报
作者:goodgirlmia 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。