下拉列表的級聯操作(ajax)

2022-10-07 09:03:08 字數 2021 閱讀 8440

在開發中常常會遇到選單的級聯操作,比如:國家、城市、鄉鎮的選擇等。當選中某個國家的時候,後面的選單會把該國家內的城市羅列出來,當選中城市的時候,後面的選單會把對應的鄉鎮列出來。 

解決這種選單的級聯操作的辦法,我理解的有兩種:

①使用js來實現,把頁面所用到的級聯資料放到js內,當頁面載入完成後,通過js顯示到對應的select內,這種方法的解決辦法有很多種,最為直觀的一種是放到多維陣列中,每個人的思維不一樣,這裡就不詳細解說。

②使用ajax非同步動態載入,然後顯示到對應的select內,這種方法很便捷,建議在開發中使用。

下面看乙個開發中的小例子: 

jsp簡短頁面: 

裝置類別

裝置子類

--請選擇--

該頁面內涉及到了兩個select,分別為:裝置分類和裝置子類,其中裝置分類為一級選單,裝置子類為二級選單,裝置子類的顯示內容由裝置分類決定。 

下面來看ajax**段: 

function addcodecategory()

$("#codecategory").html(str);

}});

} function showcode

async: false, //請求是否非同步,預設為非同步,這也是ajax重要特性

type: "get", //請求方式

success: function(result)

$("#codesubcate").html(str);

}});

}不難看出,當裝置分類選擇器內的內容發生改變後,觸發showcodesubcate函式來請求後台獲取資料,然後把請求到的資料新增到裝置子類對應的select內。後台**的實現如下(只貼出controller的方法):

@requestmapping("/showcodecategory")

@responsebody

public result searchcodecategory()

@requestmapping("/show程式設計客棧codesubcategory")

這兩個方法分別對應上面的兩個ajax請求,值得介紹的是後台返回的資料,返回值型別為result,該返回值型別是乙個工具類,具體實現可以在我的部落格中檢視,鏈結為:

ajax與後台互動傳輸資料的工具類

public class result implements serializable

public result(boolean success)

public boolean issuccess()

public void setsuccess(boolean success)

public t getdata()

public void setdata(t data)

public string getmsg()

public void setmsg(string msg)

public result(boolean success, string msg)

public result(boolean success, t data)

} 該類為前後臺互動提供了非常大的便捷: 

下面是前後臺的ajax互動:

前台ajax**:

$.ajax(,

async: false, //請求是否非同步,預設為非同步,這也是ajax重要特性

type: "get", //請求方式

success: function(data)

}});

下面是後台j**a**:

本文標題: 下拉列表的級聯操作(ajax)

本文位址:

級聯下拉列表

下拉列表,同步 charset utf 8 title type text j ascript var provinces 安徽 江蘇 浙江 山東 var cities 合肥 蕪湖 蚌埠 安慶 南京 蘇州 無錫 徐州 杭州 寧波 溫州 金華 濟南 青島 煙台 日照 var provselnode v...

JS AJAX 實現級聯下拉列表

實現在下拉框的級聯查詢,可以使得使用者不進行頁面跳轉便可以根據下拉框中所選的高階選項更改低階選項的內容。增進使用者體驗 以省市縣 區為例,在使用者選擇不同的省時,更新後面的市和對應的縣 區 在使用者選擇不同的市時,更新後面縣 區的內容。這裡我們僅演示如何實現下拉框的級聯查詢,所以省略了action屬...

yii實現級聯下拉列表

在模版中 echo form dropdownlist model,src type id ordersrc options array id task order src id echo form dropdownlist model,src shop id array 全部 array id t...