效果图:
Ajax实现DropDownList与ListBox联动效果
目标:选择DropDownList,左侧ListBox从服务器端获取对应项。点击Button,对左、右侧ListBox进行操作。
             最后在服务器端获取右侧ListBox的值
过程:
         1、首先是给DropDownList弄个数据源,实际开发中一般都是从数据库去。我这演示方便就随便new 了个DataTable。

 

 


 1
private void DllBindData()
 
2    {
 
3        DataTable table = new DataTable("MyCategory");
 
4        DataColumn column;
 
5        DataRow row;
 
6        column = new DataColumn();
 
7        column.DataType = System.Type.GetType("System.Int32");
 
8        column.ColumnName = "iSysCode";
 
9        table.Columns.Add(column);
10
11        column = new DataColumn();
12        column.DataType = System.Type.GetType("System.String");
13        column.ColumnName = "cName";
14        table.Columns.Add(column);
15
16        row = table.NewRow();
17        row["iSysCode"= 1;
18        row["cName"= "编程语言";
19        table.Rows.Add(row);
20
21        row = table.NewRow();
22        row["iSysCode"= 2;
23        row["cName"= "编程工具";
24        table.Rows.Add(row);
25
26        row = table.NewRow();
27        row["iSysCode"= 3;
28        row["cName"= "数据库";
29        table.Rows.Add(row);
30
31        ddlCategory.DataSource = table.DefaultView;
32        ddlCategory.DataValueField = "iSysCode";
33        ddlCategory.DataTextField = "cName";
34        ddlCategory.DataBind();
35    }

         2、有了数据,下面就开始操作了。
              在DropDownList的客户端事件onchange中添加choose函数,choose中调用sendRequest_Item向服务器请求相应的数据

1Ajax实现DropDownList与ListBox联动效果function choose(ddl)
2            }

 

}


         3、服务器端用了个WebService返回数据

    }


         4、分析操作返回的数据(XML格式)这个是关键,在这花了我好长一段时间:用xmlDoc.getElementsByTagName("Item")方法得到的options,长度length总是为0,但确实是有数据返回;用responseText可以正确取出数据。在网上搜了半天也没找到一个适当的解决方法。郁闷n久之后,找到了问题所在,原来是数据被Encode了。这好办,咱就给他DeEncode呗。

}


         5、这样一来,DropDownList就可以和左侧的ListBox实现联动了。接下来是如何操作它了。这里我只写了最上面两个按钮的点击实现,大家可以根据自己的需要实现其他的两个。看一下JS代码:

            }


         6、进行到这里,右侧的ListBox已经有了结果项了。剩下的是如何在服务器端获取这部分数据。Test了几下表明用Request.Form这种根本无法直接获取到所需数据。那只好转个弯,先将数据放在hiddenField里,然后在服务器端方法里取出来。OK,大功告成!

感受:
 本来以为弄这么个小东西顶多一上午时间就够了,没想到中间出现了不少问题,一个个解决后,发现竟然用了我一整天(包括晚上啊)的时间。唉,看来做什么事都不能大意啊。另外,大家有什么更好的方法,欢迎一起研究研究,呵呵!

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-18
  • 2022-02-01
  • 2022-01-18
猜你喜欢
  • 2022-12-23
  • 2021-11-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案