Jquery+Ajax實現Select動態定資料

標籤：items   頁面   strong   pen   region   key   定時   com   inline   

解決思路：

在資料庫中建立類型字典式表。將下拉框需要添加的項，在資料庫表裡中文、英文名稱對應起來。

下拉框動態綁定資料庫表中需要欄位。

 

[csharp] view plain copy 

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().

實現代碼：

 

 

[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=\"" + 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.          
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動態定資料