jquery+html三级联动下拉框及详情页面加载时的se

页面导航:首页 > 网络编程 > JavaScript > jquery+html三级联动下拉框及详情页面加载时的se

jquery+html三级联动下拉框及详情页面加载时的se

来源: 作者: 时间:2016-02-05 11:06 【

html写的三个下拉框,如下:select name=ddlQYWZYJ id=ddl_QYWZYJ class=fieldsel style=width: 200px;font-size:12px selectselect name=ddlQYWZEJ id=ddl_QYWZEJ class=fieldsel
html写的三个下拉框,如下:
 
 <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel" style="width: 200px;font-size:12px"  ></select>
 <select name="ddlQYWZEJ" id="ddl_QYWZEJ" class="fieldsel" style="width: 200px;font-size:12px"></select>
 <select name="ddlQYWZSJ" id="ddl_QYWZSJ" class="fieldsel" style="width: 200px;font-size:12px"></select>
要求1:加载页面时初始化一级下拉框,当一级下拉框点击取值后加载二级下拉框,点击二级下拉框后加载三级下拉框;
 
 
$(document).ready(function () {
            //一级单位的下拉显示框
        $.getJSON(rootPath + 'Dictionary/GetDicDataForSelect?idfield=ID&textfield=VALUE&' + "where=" + JSON2.stringify({
                op: 'and',
                rules: [{ field: 'PARENTID', value: 1, op: 'equal' }]
            }), function (json) {
                var lst = eval(json);
                for (i = 0; i < lst.length; i++) {
                    var tname = lst[i].text;
                    var tid = lst[i].id;
                    $("#ddl_QYWZYJ").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            });
            $("#ddl_QYWZYJ").click(function () {
                GetQYWZYJData();
            });
            $("#ddl_QYWZEJ").click(function () {
                GetQYMSData();
            })
        })
          
 
         @* 一级下拉框值改变时触发加载二级下拉框*@
        function GetQYWZYJData() {
            var QYWZYJvalue = $('#ddl_QYWZYJ option:selected').val();//选中的文本
            $.getJSON(rootPath + 'Dictionary/GetDicDataForSelect?idfield=ID&textfield=VALUE&' + "where=" + JSON2.stringify({
                op: 'and',
                rules: [{ field: 'PARENTID', value: QYWZYJvalue, op: 'equal' }]
             }), function (json) {
                 $("#ddl_QYWZEJ").html("");//清空下拉框  
                 $("#txt_QYMS").html("");//清空区域描述
                var lst = eval(json);
                 for (var i = 0; i < lst.length; i++) {
                     $("#ddl_QYWZEJ").append("<option value='" + lst[i].id + "'>" + lst[i].name + "</option>");
                 }
            })
        }
 
 
        @* 二级下拉框值改变时触发加载三级下拉框*@
        function GetQYMSData() {
            var QYWZEJvalue = $('#ddl_QYWZEJ option:selected').val();//选中的文本
            if (QYWZEJvalue == null) return;
            $.getJSON(rootPath + 'Dictionary/GetDicDataForSelect?idfield=ID&textfield=VALUE&' + "where=" + JSON2.stringify({
                op: 'and',
                rules: [{ field: 'ID', value: QYWZEJvalue, op: 'equal' }]
            }), function (json) {
                $("#ddl_QYWZSJ").html("");
                var lst = eval(json);             
                for (var i = 0; i < lst.length; i++) {
                    $("#ddl_QYWZSJ").append("<option value='" + lst[i].id + "'>" + lst[i].name + "</option>");
                }
            }) 
        }
 
 
 
 
 
要求2:选择三个下拉框,分别把三个选中的text值保存在一个表(如XX表)中,当加载详情页面时,读取XX表中该记录保存的下拉框选中的text值,初始化三个下拉框。
 
这时,需要注意的是option的value与text值。value是下拉框选项的取值,不显示在页面中;text为文本显示值,我们在页面中看到的是text值。
 
针对下拉框select,我们建了一个实体类LigerUISelect。如下代码
 
 
    /// <summary>
    /// LigerUI中Select的实体类
    /// </summary>
    public class LigerUISelect
    {
        #region - 属性 -
 
        /// <summary>
        /// id
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 显示内容
        /// </summary>
        public string text { get; set; }
 
 
         /// <summary>
        /// 将实体转为为Select列表
        /// </summary>
        /// <param name="department"></param>
        /// <returns></returns>
      public static LigerUISelect ToViewModel(tbDictionary dict)
        {
            LigerUISelect item = new LigerUISelect();
            item.id = dict.ID;   //注意,select类的ID等于字典表记录ID字段
            item.text = dict.VALUE;  //select类的text等于字典表记录的Value字段
            return item;
        }  
}  
 
上面构造的select实体类中的属性id(对应option value)=dict.ID,和text(对应option text)=dict.VALUE。ID和text的值不一致,注意到代码出现一个字典表tbDictionary——dict.ID:字典ID,dict.VALUE:字典值;而保存在XX表的三个下拉框取值是option text值(即对应select实体类中的text值,也是对应字典表中的VALUE值)。
 
select初始化时,是根据option value来初始化值的,但是从读取出的是option text值,所以匹配不上的话,则select初始化值不显示。因此,需要把读出的option text的值转化为option value。
 
那么问题来了,如何转化呢?
 
前面已经说了,XX表保存的下拉框取值是option text,前面也提到,option text对应select实体类的text属性,也对应了字典表中的VALUE字段;option value对应了select实体类的ID属性,也对应了字典表ID字段。
 
因此,把option text转化为其option value,实质上就是在字典表中根据VALUE字段值找出其对应的ID值!
 
所以问题就简单了,如下代码即可转化:
 
DictionaryService和IDictionaryService分别是字典表tbdicitonary实体模型对应的BLL层中的构造函数及其接口函数。
 
 IDictionaryService areaService = new DictionaryService();
   //根据值转换成对应的ID
 data.QYYJ = areaService.GetEntity(p => p.VALUE == data.QYYJ) == null ?"" : areaService.GetEntity(p => p.VALUE == data.QYYJ).ID.ToString();
 
 
其实,针对要求2,还可以用一个更简单的方法实现。 LigerUI中Select实体类中的id和text的值写成一致即可。这样option value和option text值也一致,就能直接能初始化select值,不需要转化了。如下代码:
 
 
    /// <summary>
    /// LigerUI中Select的实体类
    /// </summary>
    public class LigerUISelect
    {
        #region - 属性 -
 
        /// <summary>
        /// id
        /// </summary>
        public string id { get; set; }
 
        /// <summary>
        /// 显示内容
        /// </summary>
        public string text { get; set; }
 
 
         /// <summary>
        /// 将实体转为为Select列表
        /// </summary>
        /// <param name="department"></param>
        /// <returns></returns>
      public static LigerUISelect ToViewModel(tbDictionary dict)
        {
            LigerUISelect item = new LigerUISelect();
            item.id = dict.VALUE;   //id和text都等于字典值VALUE
            item.text = dict.VALUE;  
            return item;
        }  
}  
 
 
 
前端View页面中对select的初始化语句:
 
function LoadData() {
LG.ajax(
  {
      url: rootPath1 + 'ReportsGenerate/GetCSBDataToUI',
      loading: '正在加载...',
      data: {
          ID: ywid
      },
      success: function (result) {
          if (!result) {
              LG.showError("加载失败!");
              return false;
          }
          else {
              LoadControlData(result);
          }
      },
      error: function (message) {
          LG.showError("加载失败!");
      }
  })
}
 
 @*给控件赋值*@
function LoadControlData(result) {
   document.getElementById('ddl_QYWZYJ').value = result.QYWZYJ;
   document.getElementById('ddl_QYWZEJ').value = result.QYWZEJ;
   document.getElementById('txt_QYWZSJ').value = result.QYWZSJ;
}
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<