首页 > 代码库 > （转）Jquery+Ajax实现Select动态定数据

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

2024-08-23 01:22:51   226人阅读

解决思路：

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

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

 

[csharp] view plain copy
 
  1. <div id="bgDiv" style="display:none;"></div>  
  2.                 <a  class="btn-lit" href=http://www.mamicode.com/"javascript:"  onclick="bgDiv.style.display=‘inline‘;advancedQuery.style.display=‘‘;addItems()"><span>高级查询</span></a>  


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

实现代码：

 

 

[javascript] view plain copy
 
  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=http://www.mamicode.com/"" + jsonObj[j].ID + "\" >" + jsonObj[j].chinesename + "</option>";  
  16.                         }  
  17.                         $("#dpdField1").html("<option value=http://www.mamicode.com/‘请选择‘>请选择... "+optionstring);  
  18.                     }  
  19.                 },  
  20.                 error: function (msg) {  
  21.                     alert("出错了！");  
  22.                 }  
  23.             });            
  24.         };  
  25.          
  26.     </script>   

 


后台代码：

[csharp] view plain copy
 
  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.        }  
[csharp] view plain copy
 
  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值，进行后台的查询字段。

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


联系
我们