許多頁(yè)面上都涉及有下拉框，即select標(biāo)簽。對(duì)于簡(jiǎn)單的下拉框，被選擇的數(shù)據(jù)是不需要改變的，我們可以用<option></option>寫(xiě)死。這樣下拉框的數(shù)據(jù)永遠(yuǎn)都是那幾條。

示例：

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

但是有些項(xiàng)目或者工程是需要將數(shù)據(jù)庫(kù)中的數(shù)據(jù)呈現(xiàn)出來(lái)并提供選擇的，下拉的內(nèi)容會(huì)隨數(shù)據(jù)庫(kù)中數(shù)據(jù)的變化而變化。首先我們有asp組件可以幫我們做這這件事情，DropDownList組件，只需要將數(shù)據(jù)庫(kù)中查詢(xún)得到的數(shù)據(jù)添加進(jìn)該組件中，在前臺(tái)即可以顯示出動(dòng)態(tài)下拉的效果。如果想更有新意，不依賴(lài)于傳統(tǒng)組件，ajax就是個(gè)不錯(cuò)的選擇。下面一步步來(lái)通過(guò)ajax實(shí)現(xiàn)動(dòng)態(tài)下拉的效果。

1.js發(fā)出ajax請(qǐng)求：

$(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請(qǐng)求WareHouse.ashx（一般處理程序）來(lái)獲得數(shù)據(jù)，請(qǐng)求成功后將返回的json數(shù)據(jù)附加到id為issued_sub_key_c的select標(biāo)簽。值得注意的是這里將async的屬性改為了false，async的默認(rèn)狀態(tài)為true，即為異步。值改為false就是同步了。但是當(dāng)async為false的時(shí)候，ajax請(qǐng)求完數(shù)據(jù)之前，瀏覽器一直處于鎖死狀態(tài)，這樣會(huì)讓使用者認(rèn)為程序崩潰了，所以就人為的添加了一個(gè)超時(shí)（timeout），這樣就不會(huì)出現(xiàn)程序崩潰的假象?；氐皆掝}開(kāi)始，為什么要將async改為false呢？原因就是當(dāng)ajax是異步請(qǐng)求的時(shí)候進(jìn)入到頁(yè)面后出現(xiàn)下拉框數(shù)據(jù)還未同步，下拉框是空白數(shù)據(jù)（可以自己體驗(yàn)體驗(yàn)）。所以我們需要利用同步的特性并配合超時(shí)來(lái)完成下拉框的數(shù)據(jù)同步。

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

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(",")) + "]";
    }


    /*得到并關(guān)聯(lián)倉(cāng)庫(kù)(select標(biāo)簽)*/

    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.前臺(tái)頁(yè)面：前臺(tái)只需要定義一個(gè)id為issued_sub_key_c的select標(biāo)簽。注意select標(biāo)簽須得有一個(gè)name，后臺(tái)正是通過(guò)name來(lái)取得選中數(shù)據(jù)的值。取值方法：Request.Form["issued_sub_key_c"]。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論