jquery+html三級聯動下拉框及詳情頁面加載時的select初始化問題

時間 2019-11-11

標籤 jquery+html jquery html 三級聯動下拉詳情頁面加載 select 初始化問題欄目 JQuery 简体版

原文原文鏈接

html寫的三個下拉框，以下：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值，初始化三個下拉框。ajax

這時，須要注意的是option的value與text值。value是下拉框選項的取值，不顯示在頁面中；text爲文本顯示值，咱們在頁面中看到的是text值。數據庫

針對下拉框select，咱們建了一個實體類LigerUISelect。以下代碼json

    /// <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值）。app

select初始化時，是根據option value來初始化值的，可是從數據庫讀取出的是option text值，因此匹配不上的話，則select初始化值不顯示。所以，須要把讀出的option text的值轉化爲option value。函數

那麼問題來了，如何轉化呢？url

前面已經說了，XX表保存的下拉框取值是option text，前面也提到，option text對應select實體類的text屬性，也對應了字典表中的VALUE字段；option value對應了select實體類的ID屬性，也對應了字典表ID字段。spa

所以，把option text轉化爲其option value，實質上就是在字典表中根據VALUE字段值找出其對應的ID值！code

因此問題就簡單了，以下代碼便可轉化：

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;
}