jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框，如下：
&&select name=&ddlQYWZYJ& id=&ddl_QYWZYJ& class=&fieldsel& style=&width: 200font-size:12px& &&&/select&
&&select name=&ddlQYWZEJ& id=&ddl_QYWZEJ& class=&fieldsel& style=&width: 200font-size:12px&&&/select&
&&select name=&ddlQYWZSJ& id=&ddl_QYWZSJ& class=&fieldsel& style=&width: 200font-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. i++) {
& & & & & & & & & & var tname = lst[i].
& & & & & & & & & & var tid = lst[i].
& & & & & & & & & & $(&#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. 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)
& & & & & & $.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. 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 { }
& & & & /// &summary&
& & & & /// 显示内容
& & & & /// &/summary&
& & & & public string text { }
& & & & &/// &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字段
& & & & & &
& & & & } &
上面构造的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 { }
& & & & /// &summary&
& & & & /// 显示内容
& & & & /// &/summary&
& & & & public string text { }
& & & & &/// &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; &
& & & & & &
& & & & } &
前端View页面中对select的初始化语句：
function LoadData() {
& & & url: rootPath1 + 'ReportsGenerate/GetCSBDataToUI',
& & & loading: '正在加载...',
& & & data: {
& & & & & ID: ywid
& & & success: function (result) {
& & & & & if (!result) {
& & & & & & & LG.showError(&加载失败!&);
& & & & & & &
& & & & & }
& & & & & 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;
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'5686人阅读
java ee（10）
ajax 下拉列表联动的用法。
ajax的定义：
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax效果的一个例子：
区域为空的时候，维护人情况：
选了一个区域后的情况：（选 舒城县 联带出来的维护人员 小刘）
一、原生态的js实现
XMLHttpRequest 是 AJAX 的基础
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
function createXMLHttpRequest(){
if(window.ActiveXObject){//检查浏览器是否支持 XMLHttpRequest 对象
xmlHttp = new ActiveXObject(&Microsoft.XMLHTTP&);//不支持 创建
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//支持 直接new
}//创建一个xmlHttp 对象
function ajaxRequest(url,data,responseResult){//ajaxRequest是将请求发送到后台的function
createXMLHttpRequest();//调用 创建一个XMLHttpRequest对象
xmlHttp.open(&POST&,url,true);//规定请求的类型（post）、URL 以及是否异步处理请求（是）
xmlHttp.setRequestHeader(&Content-Type&,&application/x-www-form-urlencoded&);//类似HTML 表单那样 POST 数据 的http头
xmlHttp.onreadystatechange = responseR//规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
xmlHttp.send(data);//发送数据
//前台页面的区域select代码：
&th&区域：&/th&
&select style=&width: 152px& name=&areaId&
id=&areaId&
class=&select_field& onchange=&getWhmans(this.value)&&
&option value=&&
style=&color:#999999&&-请选择-&/option&
&c:forEach items=&${arealist}& var=&area& &
&option value=&${area.id}&&${area.areaName}&/option&
&/c:forEach&
&/select&&font color=&red&&*&/font&
//前台维护人select页面代码：
&th&维护人员：&/th&
id=&whman& style=&width: 152px& class=&select_field& name=&whman& &
&option value=&& style=&color:#999999&&请选择&/option&
&/select&&font color=&red&&*&/font&
//以下是后台的部分代码
List&Whperson& customers = factoryBO.getFugBO().getWhperson(area);//根据区域来得到该区域下的维护人信息 即选一个下拉框的区域后联动另一个下拉框带出该区域的维护人信息
if (customers != null) {
JSONArray jsonArray = new JSONArray();//new一个json数组
for (Whperson whman : customers) {
JSONObject obj = new JSONObject();
obj.put(&id&, whman.getId());
obj.put(&name&, whman.getName());
jsonArray.add(obj);//循环new jsonObject 并把维护人信息 put进去 再add到josnArray里去
out.write(jsonArray.toString());//输出写到页面 即下面的responseText里面
out.write(&null&);
out.flush();
out.close();
function responseCustomer(){//后台响应完成后执行的function
if(xmlHttp.readyState == 4){//4表示请求已完成 ，响应已就绪
if(xmlHttp.status == 200){//表示ok
var message=xmlHttp.responseT//为后台返回过来的文本
if(message==&null&){//若没有返回任何信息
document.getElementById(&id&).options.length=1;//把id='id'的option下拉框置空
var info2 = eval(message);
//解析一下json字符串
document.getElementById(&whman&).options.length=1;把id='id'的option下拉框先置空
$.each(info2, function(i,n){
document.getElementById(&whman&).options.add(new Option(n.gridName,n.gridId));//给下拉框option加上后台返回的值 即增加下拉框选项
function getGridByAreaId(val){//自己写的函数 另一个option onchange事件触发的函数,目的是选这个option后 想要的option能级联
var url=&village.do?method=getGridByAreaId&;//请求后台的url
var data=&id=&+val.//传入后台的参数
ajaxRequest(url,data,responseCustomer);//实质要调用的ajax的函数
二、Jquery ajax的实现
function getWhmans(obj){
var url=&bbtj.do?method=getWhman&;//请求后台的url
$(&#whman&).empty();//先置空
$(&#whman&).append($('&option value=&&&-请选择-&/option&'));//加上--请选择--选项
if($(obj).val()==&&)
//无值，返回
url+=&&areaId=&+$(obj).val();//url参数
url+=&&t=&+(new Date()).valueOf();//url参数
type:'POST',//POST方式
dataType:'text',//返回text类型
beforeSend:function(xmlHttpRequest,status){
success:function(data,status){
var d=eval(data);//解析
$(d).each(function(index,entity){
$(&#whman&).append($('&option value=&'+entity['id']+'&&'+entity['name']+'&/option&'));//后台数据加到下拉框
complete:function(xmlHttpRequest,status){
error:function(){
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：86758次
积分：1253
积分：1253
排名：千里之外
原创：34篇
评论：54条
(1)(9)(2)(2)(3)(1)(2)(1)(1)(1)(2)(2)(2)(6)(6)下拉框代码 下拉框特效 jquery下拉框代码
您当前位置： >> >>
javascript
& CopyRight , , Inc.All Rights Reserved.}