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

html写的三个下拉框，如下：

要求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("" + tname + "");

}

});

$("#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("" + lst[i].name + "");

}

})

}

@* 二级下拉框值改变时触发加载三级下拉框*@

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("" + lst[i].name + "");

}

})

}

要求2：选择三个下拉框，分别把三个选中的text值保存在一个表(如XX表)中，当加载详情页面时，读取XX表中该记录保存的下拉框选中的text值，初始化三个下拉框。

这时，需要注意的是option的value与text值。value是下拉框选项的取值，不显示在页面中；text为文本显示值，我们在页面中看到的是text值。

针对下拉框select，我们建了一个实体类LigerUISelect。如下代码

///

///LigerUI中Select的实体类///

public classLigerUISelect

{#region - 属性 -

///

///id///

public int id { get; set; }///

///显示内容///

public string text { get; set; }///

///将实体转为为Select列表///

///

///

public staticLigerUISelect ToViewModel(tbDictionary dict)

{

LigerUISelect item= newLigerUISelect();

item.id= dict.ID; //注意，select类的ID等于字典表记录ID字段

item.text= dict.VALUE; //select类的text等于字典表记录的Value字段

returnitem;

}

}

上面构造的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 = newDictionaryService();//根据值转换成对应的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值，不需要转化了。如下代码：

///

///LigerUI中Select的实体类///

public classLigerUISelect

{#region - 属性 -

///

///id///

public string id { get; set; }///

///显示内容///

public string text { get; set; }///

///将实体转为为Select列表///

///

///

public staticLigerUISelect ToViewModel(tbDictionary dict)

{

LigerUISelect item= newLigerUISelect();

item.id= dict.VALUE; //id和text都等于字典值VALUE

item.text =dict.VALUE;returnitem;

}

}

前端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;

}

原文：http://www.cnblogs.com/goodgirlmia/p/4165216.html