JavaScript解析Json實現動態修改多級下拉選擇列表控制元件Select
阿新 • • 發佈：2019-01-11
最終效果：
根據上級選單所選，決定下級選單的列表項內容:
資料來源
首先讀取資料庫中的資料得到資料，由於資料庫中的資料是分散的幾個二維表格，查詢出來的資料是Map鍵值對的List集合，不能直接拿來用，需要先進行處理：一級選單封裝為String型別選單項的List集合，二級選單封裝為鍵名為一級分類項名稱，鍵值為對應二級分類項的List集合的Map。三級選單是同二級選單類似的Map。
再將三個級別的選單資料轉為Json字串，通過request物件傳遞給頁面。
request.setAttribute("oneListJson", oneListJson); request.setAttribute("twoMapJson", twoMapJson); request.setAttribute("threeMapJson", threeMapJson);
解析出來的三級選單Json字串分別為：
一級選單：{"json":["其他","辦公","圖書","彩妝","數碼","服飾","母嬰","電器","美食","鞋包"]}
二級選單：{"json":{"圖書":["兒童圖書"],"其他":["其他"],"彩妝":["化妝工具","脣膏","睫毛膏","眼影","指甲油"],"鞋包":["鞋靴"],"美食":["水果","調味品"],"電器":["家用電器"],"服飾":["女裝","男裝"],"數碼":["手機通訊","攝影攝像","手機配件","電腦耗材"],"母嬰":["嬰兒食品"],"辦公":["穿戴裝置"]}}
三級選單：{"json":{"鞋靴":["男鞋","女鞋","布鞋"],"水果":["蘋果"],"脣膏":["滋潤脣膏","咬脣妝"],"睫毛膏":[],"手機通訊":["安卓手機","蘋果手機","耳機"],"指甲油":[],"手機配件":["手機保護殼","屏保"],"穿戴裝置":["智慧手錶"],"女裝":["T恤衫","休閒褲","打底褲","女士短褲"],"眼影":[],"其他":[],"化妝工具":["畫眉筆"],"家用電器":["彩電","廚房電器"],"電腦耗材":["音箱"],"男裝":[],"攝影攝像":["數碼相機"],"嬰兒食品":[],"調味品":["果醬"],"兒童圖書":["益智"]}}
在頁面中接收Json字串：
String oneListJson = (String) request.getAttribute("oneListJson");
String twoMapJson = (String) request.getAttribute("twoMapJson");
String threeMapJson = (String) request.getAttribute("threeMapJson");<TR bgColor=#ffffff height=20> <TD height="0" align="center" noWrap><span class="STYLE7">分類：</span></TD> <TD height="0" colspan="5" noWrap> <select onchange="onechange(this.value)" style="WIDTH: 80px" id="categorysel" name="category" class="text2"> <option value="8">-請選擇-</option> </select> <select name="sub_category" id="subcategorysel" onchange="twochange(this.value)"> <option value="8">-請選擇-</option> </select> <select name="s_sub_category" id="s_subcategorysel"> <option value="8">-請選擇-</option> </select> </TD> </TR>
首先載入一級選單，一級選單在一次訪問中是不會改變的，所以在頁面載入時就要生成。
生成一級選單項的JavaScript程式碼：
function oneSelect() {
//第一個下拉列表
var oneListJson =<%=oneListJson%>;
//alert('Onclick事件發生'+oneListJson.json.length);
//{"json":["其他","辦公","圖書","彩妝","數碼","服飾","母嬰","電器","美食","鞋包"]}
var categorysel = document.getElementById("categorysel");
//清空二級下拉列表
for ( var i = categorysel.options.length - 1; i > 0; i--) {
categorysel.options.remove(i);
}
//生成新的下拉選項
for ( var i = 0; i < oneListJson.json.length; i++) {
//alert(i);
if (document.all) //IE
{
//alert('IE'+i);
var newoption = document.createElement('option');
newoption.value = oneListJson.json[i];
newoption.text = oneListJson.json[i];
categorysel.options.add(newoption);
} else { //其他瀏覽器
//alert('Chrome'+i);
var newoption = document.createElement('option');
newoption.value = oneListJson.json[i];
newoption.text = oneListJson.json[i];
categorysel.options.add(newoption);
//oSelect.insertBefore(new Option(optionValue, optionText), oSelect.options[position]);
//categorysel.insert(new Option(optionValue, optionText));
}
}
}其中一級選單的Json字串只有一對鍵值對，鍵值是一個數組，可以使用：Json字串名.鍵名[下標]，來訪問每一個值。 在頁面載入時載入一級選單：
<BODY bgColor="#ffffff" onload="oneSelect()">動態生成二級選單項的JavaScript程式碼：在一級選單改變時
//selvalue一級下拉列表的選中項
function onechange(selvalue) {
//拿到Select控制元件
var subcategorysel = document.getElementById("subcategorysel");
//第一級下拉控制元件選項改變後，先清空二級下拉選項
for ( var i = subcategorysel.options.length - 1; i > 0; i--) {
subcategorysel.options.remove(i);
}
//拿到三級下拉列表項並清空
var s_subcategorysel = document.getElementById("s_subcategorysel");
for ( var i = s_subcategorysel.options.length - 1; i > 0; i--) {
s_subcategorysel.options.remove(i);
}
//拿到二級下拉列表的json字串
//twoMapJson={"json":{"圖書":["兒童圖書"],"其他":["其他"],"彩妝":["化妝工具","脣膏","睫毛膏","眼影","指甲油"],
//"鞋包":["鞋靴"],"美食":["水果","調味品"],"電器":["家用電器"],"服飾":["女裝","男裝"],
//"數碼":["手機通訊","攝影攝像","手機配件","電腦耗材"],"母嬰":["嬰兒食品"],"辦公":["穿戴裝置"]}}
var twoMapJson=<%=twoMapJson%>;
//根據鍵名得到json字串中的鍵值
//alert(selvalue + '---' + twoMapJson.json[selvalue]);
//生成新的下拉列表選項，對於鍵值為陣列的可以直接使用[角標]訪問某個值
for ( var j = 0; j < twoMapJson.json[selvalue].length; j++) {
var newoption = document.createElement('option');
newoption.value = twoMapJson.json[selvalue][j];
newoption.text = twoMapJson.json[selvalue][j];
subcategorysel.options.add(newoption);
}
}動態生成三級選單項的JavaScript程式碼：在二級選單改變時
function twochange(selvalue){
var s_subcategorysel = document.getElementById("s_subcategorysel");
//threeMapJson={"json":{"鞋靴":["男鞋","女鞋","布鞋"],"水果":["蘋果"],
//"脣膏":["滋潤脣膏","咬脣妝"],"睫毛膏":[],"手機通訊":["安卓手機","蘋果手機","耳機"],"指甲油":[],
//"手機配件":["手機保護殼","屏保"],"穿戴裝置":["智慧手錶"],"女裝":["T恤衫","休閒褲","打底褲","女士短褲"],
//"眼影":[],"其他":[],"化妝工具":["畫眉筆"],"家用電器":["彩電","廚房電器"],"電腦耗材":["音箱"],//
//"男裝":[],"攝影攝像":["數碼相機"],"嬰兒食品":[],"調味品":["果醬"],"兒童圖書":["益智"]}}
var threeMapJson=<%=threeMapJson%>;
//alert(selvalue + '---' + threeMapJson.json[selvalue]);
for ( var i = s_subcategorysel.options.length - 1; i > 0; i--) {
s_subcategorysel.options.remove(i);
}
for ( var j = 0; j < threeMapJson.json[selvalue].length; j++) {
var newoption = document.createElement('option');
newoption.value = threeMapJson.json[selvalue][j];
newoption.text = threeMapJson.json[selvalue][j];
s_subcategorysel.options.add(newoption);
}
return;
}