标签：style blog io ar color os sp for strong
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; }
jquery+html三级联动下拉框及详情页面加载时的select初始化问题
标签：style blog io ar color os sp for strong
原文地址：http://www.cnblogs.com/goodgirlmia/p/4165216.html
