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

最终效果：

根据上级菜单所选，决定下级菜单的列表项内容:

数据源

首先读取数据库中的数据得到数据，由于数据库中的数据是分散的几个二维表格，查询出来的数据是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控件处的代码：

													分类：
													
													
														-请选择-
													 
													
														-请选择-
													 
													
														-请选择-
													
													
												

首先加载一级菜单，一级菜单在一次访问中是不会改变的，所以在页面加载时就要生成。

生成一级菜单项的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字符串名.键名[下标]，来访问每一个值。

在页面载入时加载一级菜单：

动态生成二级菜单项的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;
}