jquery怎么實(shí)現(xiàn)下拉選擇不同顯示不同

這篇文章主要介紹了jquery怎么實(shí)現(xiàn)下拉選擇不同顯示不同的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇jquery怎么實(shí)現(xiàn)下拉選擇不同顯示不同文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

　　下面步驟介紹了如何從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)，并動(dòng)態(tài)的在前端顯示。

　　步驟一：jsp頁(yè)面靜態(tài)的select：

　　選擇A

　　選擇B

　　選擇C

　　注意：

　　1、靜態(tài)的select在某些場(chǎng)景下使用是沒有問(wèn)題的。但是在產(chǎn)品不同的需求時(shí)，動(dòng)態(tài)select更能勝任其多樣性。

　　2、select有多種寫法，這里是最簡(jiǎn)單的。

　　步驟二：jQuery通過(guò)ajax請(qǐng)求獲取動(dòng)態(tài)的數(shù)據(jù)，并在jsp頁(yè)面顯示。

　　function IninDepart（）{

　　$（"#selectSM"）。remove（）;//清空select列表數(shù)據(jù)

　　var state=1;

　　$.ajax（{

　　type : "POST",

　　url : "/getItemDepartList.do",

　　dataType : "JSON",

　　data : {},

　　success : function（msg）

　　{

　　$（"#selectSM"）。prepend（"請(qǐng)選擇"）;//添加第一個(gè)option值

　　for （var i=0; i < msg.rows.length; i++） {

　　//如果在select中傳遞其他參數(shù)，可以在option 的value屬性中添加參數(shù)

　　//$（"#selectSM"）。append（""+msg.rows[i]+""）;

　　$（"#selectSM"）。append（""+msg.rows[i]+""）;

　　}

　　},error:function（）{

　　alertLayer（"獲取數(shù)據(jù)失敗","error"）;

　　}

　　}）;

　　}

　　注意：這里使用的是jQuery、ajax，其他方式也可以實(shí)現(xiàn)。

　　步驟三：后臺(tái)數(shù)據(jù)的處理。

　　public JSONObject getItemDepartList（HttpServletRequest request） throws Exception{

　　//查詢select數(shù)據(jù)

　　List> list=appServices.getAppList（）;

　　System.out.println（"list::::::::" + list）;

　　//獲取數(shù)據(jù)存放到數(shù)組

　　String[] depart=null;

　　for （Map map : list） {

　　for （String k : map.keySet（）） {

　　depart=（（String） map.get（k））。split（","）;

　　System.out.println（"depart::::::::" + depart）;

　　}

　　}

　　//去除數(shù)組中重復(fù)數(shù)據(jù)，存放到list

　　List strList=new ArrayList（）;

　　for （int i=0; i

　　if（！strList.contains（depart[i]）） {

　　strList.add（depart[i]）;

　　}

　　}

　　System.out.println（"strList::::::::" + strList）;

　　jsonObject.put（"rows", strList）;

　　return jsonObject;

　　}

　　注意：由于后臺(tái)返回?cái)?shù)據(jù)的問(wèn)題，需要對(duì)數(shù)據(jù)進(jìn)行截取并去除重復(fù)數(shù)據(jù)。如果沒有這個(gè)需求，可以直接向前端返回一個(gè)數(shù)組或list即可。

關(guān)于“jquery怎么實(shí)現(xiàn)下拉選擇不同顯示不同”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“jquery怎么實(shí)現(xiàn)下拉選擇不同顯示不同”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。