（转）Jquery+Ajax实现Select动态定数据

解决思路：

在数据库中建立类型字典式表。将下拉框需要添加的项，在数据库表里中文、英文名称对应起来。

下拉框动态绑定数据库表中需要字段。

1. <div id="bgDiv" style="display:none;"></div>
2. <a  class="btn-lit" href="javascript:"  onclick="bgDiv.style.display='inline';advancedQuery.style.display='';addItems()"><span>高级查询</span></a>

在高级查询单击事件中，除了显示查询框外，添加下拉框绑定字段的函数。此处为addItems().

实现代码：

1. <script type="text/javascript">
2. //动态绑定下拉框项
3. function addItems() {
4. $.ajax({
5. url: "addItem.ashx/GetItem",    //后台webservice里的方法名称
6. type: "post",
7. dataType: "json",
8. contentType: "application/json",
9. traditional: true,
10. success: function (data) {
11. for (var i in data) {
12. var jsonObj =data[i];
13. var optionstring = "";
14. for (var j = 0; j < jsonObj.length; j++) {
15. optionstring += "<option value=\"" + jsonObj[j].ID + "\" >" + jsonObj[j].chinesename + "</option>";
16. }
17. $("#dpdField1").html("<option value='请选择'>请选择...</option> "+optionstring);
18. }
19. },
20. error: function (msg) {
21. alert("出错了！");
22. }
23. });
24. };
25. </script>

后台代码：

1. public void ProcessRequest(HttpContext context)
2. {
3. //context.Response.ContentType = "text/plain";
4. //context.Response.Write("Hello World");
5. GetItem(context);
6. }
7. public void GetItem(HttpContext context)
8. {
9. string ReturnValue = string.Empty;
10. BasicInformationFacade basicInformationFacade = new BasicInformationFacade();   //实例化基础信息外观
11. DataTable dt = new DataTable();
12. dt = basicInformationFacade.itemsQuery(); //根据查询条件获取结果
13. ReturnValue = DataTableJson(dt);
14. context.Response.ContentType = "text/plain";
15. context.Response.Write(ReturnValue);
16. //return ReturnValue;
17. }

1. #region dataTable转换成Json格式
2. /// <summary>
3. /// dataTable转换成Json格式
4. /// </summary>
5. /// <param name="dt"></param>
6. /// <returns></returns>
7. public string DataTableJson(DataTable dt)
8. {
9. StringBuilder jsonBuilder = new StringBuilder();
10. jsonBuilder.Append("{\"");
11. jsonBuilder.Append(dt.TableName.ToString());
12. jsonBuilder.Append("\":[");
13. for (int i = 0; i < dt.Rows.Count; i++)
14. {
15. jsonBuilder.Append("{");
16. for (int j = 0; j < dt.Columns.Count; j++)
17. {
18. jsonBuilder.Append("\"");
19. jsonBuilder.Append(dt.Columns[j].ColumnName);
20. jsonBuilder.Append("\":\"");
21. jsonBuilder.Append(dt.Rows[i][j].ToString());
22. jsonBuilder.Append("\",");
23. }
24. jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
25. jsonBuilder.Append("},");
26. }
27. jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
28. jsonBuilder.Append("]");
29. jsonBuilder.Append("}");
30. return jsonBuilder.ToString();
31. }
32. #endregion

利用Ajax、json给前台页面中的select绑定数据源。后台通过两个函数，分别获得数据库表的数据，将数据转为Json格式返回给前台。前台在接收数据后，将数据进行解析，获得下拉框中需要绑定的字段。在绑定时，下拉框的每一项都分别绑定一个文本、value值。文本用于显示，供用户选择。value值，是用户选择了某个字段，取得这个字段的value值，进行后台的查询字段。