ajax實現動態下拉框

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

　　示例：

<select>
    <option>信息一</option>
    <option>信息二</option>
    <option>信息三</option>
    <option>信息四</option>
</select>

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

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

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

 

　　1.js發出ajax請求：

$(document).ready(function () {
    $.ajax({
        timeout: 3000,
        async: false,
        type: "POST",
        url: "WareHouse.ashx",
        dataType: "json",
        data: {
            warehouse: $("#issued_sub_key_c").val(),
        },
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                $("#issued_sub_key_c").append("<option>" + data[i].Name + "</option>");
            }
        }
    });
});

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

 

　　2.一般處理程序：從數據庫返回的數據是List<string>類型，我們需要自己定義一個toJson()方法將list轉化為json數據，然后返回json數據。

public string toJson(List<string> str)
        {
            StringBuilder json = new StringBuilder();

            if (str == null)
            {
                return "null";

            }

            json.Append("[");
            foreach (var item in str)
            {
                json.Append("{\"Name\":\"");
                json.Append(item);
                json.Append("\"},");
            }

            return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";
        }


        /*得到並關聯倉庫(select標簽)*/

        public void ProcessRequest(HttpContext context)
        {

            SubinventoryDC subinventorydc = new SubinventoryDC();

            List<string> list = new List<string>();

            list = subinventorydc.getAllSubinventory();

            string json = toJson(list);

            context.Response.ContentType = "text/plain";

            context.Response.Write(json);
        }

 　　

　　3.前台頁面：前台只需要定義一個id為issued_sub_key_c的select標簽。注意select標簽須得有一個name，后台正是通過name來取得選中數據的值。取值方

法：Request.Form["issued_sub_key_c"]。

<select id="issued_sub_key_c" name="issued_sub_key_c">

</select>

 

　　可以看到，實現動態下拉框的方法多樣，在滿足實際情況的條件下，選擇就看個人喜好了。