許多頁面上都涉及有下拉框，即select標籤。對於簡單的下拉框，被選擇的資料是不需要改變的，我們可以用寫死。這樣下拉框的資料永遠都是那幾條。

　　示例：

1 <select>
2     <option>資訊一</option>
3     <option>資訊二</option>
4     <option>資訊三</option>
5     <option>資訊四</option>
6 </select>

　　但是有些專案或者工程是需要將資料庫中的資料呈現出來並提供選擇的，下拉的內容會隨資料庫中資料的變化而變化。首先我們有asp元件可以幫我們做這這件事

情，DropDownList元件，只需要將資料庫中查詢得到的資料新增進該元件中，在前臺即可以顯示出動態下拉的效果。如果想更有新意，不依賴於傳統元件，ajax就是

個不錯的選擇。下面一步步來通過ajax實現動態下拉的效果。

　　1.js發出ajax請求：

複製程式碼

 1 $(document).ready(function () {
 2     $.ajax({
 3         timeout: 3000,
 4         async: false,
 5         type: "POST",
 6         url: "WareHouse.ashx",
 7
 
         dataType: "json",
 8         data: {
 9             warehouse: $("#issued_sub_key_c").val(),
10         },
11         success: function (data) {
12             for (var i = 0; i < data.length; i++) {
13                 $("#issued_sub_key_c").append("<option>" + data[i].Name + "</option>"
 
);
14             }
15         }
16     });
17 });

複製程式碼
　　ajax請求WareHouse.ashx（一般處理程式）來獲得資料，請求成功後將返回的json資料附加到id為issued_sub_key_c的select標籤。值得注意的是這裡將async的屬性改為了false，async的預設狀態為true，即為非同步。值改為false就是同步了。但是當async為false的時候，ajax請求完資料之前，瀏覽器一直處於鎖死狀態，這樣會讓使用者認為程式崩潰了，所以就人為的添加了一個超時（timeout），這樣就不會出現程式崩潰的假象。回到話題開始，為什麼要將async改為false呢？原因就是當ajax是非同步請求的時候進入到頁面後出現下拉框資料還未同步，下拉框是空白資料（可以自己體驗體驗）。所以我們需要利用同步的特性並配合超時來完成下拉框的資料同步。

　　2.一般處理程式：從資料庫返回的資料是List型別，我們需要自己定義一個toJson()方法將list轉化為json資料，然後返回json資料。

複製程式碼

1 public string toJson(List<string> str)
 2         {
 3             StringBuilder json = new StringBuilder();
 4 
 5             if (str == null)
 6             {
 7                 return "null";
 8 
 9             }
10 
11             json.Append("[");
12             foreach (var item in str)
13             {
14                 json.Append("{\"Name\":\"");
15                 json.Append(item);
16                 json.Append("\"},");
17             }
18 
19             return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";
20         }
21 
22 
23         /*得到並關聯倉庫(select標籤)*/
24 
25         public void ProcessRequest(HttpContext context)
26         {
27 
28             SubinventoryDC subinventorydc = new SubinventoryDC();
29 
30             List<string> list = new List<string>();
31 
32             list = subinventorydc.getAllSubinventory();
33 
34             string json = toJson(list);
35 
36             context.Response.ContentType = "text/plain";
37 
38             context.Response.Write(json);
39         }

複製程式碼
　　

　　3.前臺頁面：前臺只需要定義一個id為issued_sub_key_c的select標籤。注意select標籤須得有一個name，後臺正是通過name來取得選中資料的值。取值方

法：Request.Form[“issued_sub_key_c”]。

1 <select id="issued_sub_key_c" name="issued_sub_key_c">
2 
3 </select>