store下拉框同步 ajax實現動態下拉框示例

2021-10-18 17:30:35 字數 1803 閱讀 3760

許多頁面上都涉及有下拉框,即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++) {

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資料。

public string tojson(list str)

stringbuilder json = new stringbuilder();

if (str == null)

return "null";

foreach (var item in str)

return json.tostring().substring(0, json.tostring().lastindexof(",")) + "]";

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

3.前台頁面:前台只需要定義乙個id為issued_sub_key_c的select標籤。注意select標籤須得有乙個name,後台正是通過name來取得選中資料的值。取值方法:request.form["issued_sub_key_c"]。

Ajax聯動下拉框的實現例子

這是採用ajax技術,重新整理是肯定的,是在我們察覺不到的速度完成.xmlhttp犧牲頁面的方法,我們之所以看不見重新整理,是因為所有的工作都是在犧牲頁面上進行的,裡面 翻江倒海 的 折騰 我們看不見,效率上差些 字串8字串6 web.config 字串7ajaxtest.aspx 字串3 page...

下拉框 列舉

列舉 public enum mchtprofitsplittype public string getvalue class 初始化中要放到下拉列表裡的 分賬方式列舉mchtprofitsplittype listorgprofitsplittypelist new arraylist mchtp...

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...