JavaScript解析Json实现动态修改多级下拉选择列表控件Select

来源：互联网发布：淘宝开店要注册商标吗编辑：程序博客网时间：2024/05/16 14:53

最终效果：
根据上级菜单所选，决定下级菜单的列表项内容:

数据源

首先读取数据库中的数据得到数据，由于数据库中的数据是分散的几个二维表格，查询出来的数据是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");

页面中多级选择Select控件处的代码：

<TR bgColor=#ffffff height=20><TD height="0" align="center" noWrap><spanclass="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;}

0 0

JavaScript解析Json实现动态修改多级下拉选择列表控件Select

最终效果：根据上级菜单所选，决定下级菜单的列表项内容:数据源

解析出来的三级菜单Json字符串分别为：

一级菜单：{"json":["其他","办公","图书","彩妆","数码","服饰","母婴","电器","美食","鞋包"]}

在页面中接收Json字符串：

生成一级菜单项的JavaScript代码：

动态生成二级菜单项的JavaScript代码：在一级菜单改变时

动态生成三级菜单项的JavaScript代码：在二级菜单改变时

最终效果：
根据上级菜单所选，决定下级菜单的列表项内容:

数据源