正文

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

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

解决思路：

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

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

  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值，进行后台的查询字段。

相关阅读

目录[+]