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

时间: 2025-01-14 14:00:14

jquery+ligerform三级联动下拉框的相关文章

jquery+html三级联动下拉框及详情页面加载时的select初始化问题

html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel" style="width: 200px;font-size:12px" ></select> <select name="ddlQYWZEJ" id="ddl_QYWZEJ" class="fields

JS年月日三级联动下拉框日期选择代码

原博客网址: http://www.cnblogs.com/gdcgy/p/5467742.html 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

Web 1三级联动 下拉框 2添加修改删除 弹框

Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { private MyDBDataContext _Context = new MyDBD

省市区三级联动下拉框效果分析

<select id="selProvince"> <option>--请选择--</option> </select> <select id="selCity"> <option>--请选择--</option> </select> <select id="selCountry"> <option>--请选择--</op

Android实现三级联动下拉框 下拉列表spinner的实例

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

ajax+jsp实现三级联动下拉框

js文件sjld.js  : $(document).ready( function(){ $.ajax({ url:"bindZ", type:"get", dataType:"json", success:bindZList }); } ); //回调函数 function bindZList(json){ data=(json.a); for(zmc in data){ var option = document.createElement

省市区三级联动下拉框+数据绑定

1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" data-code="@Model.City"

SharePoint 2013 使用查阅项实现联动下拉框

SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuery+JavaScript客户端对象模型实现,下面让我简单介绍下实现的全过程. 1.创建基础列表CityList,保存的是城市名称,使用默认字段Title: 2.列表CityList的所有栏,我把Title字段的名称改为了City Name,如下图: 3.创建基础列表AreaList,用于保存所有区和

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级