<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
var data = {
sheng: [{id:1,name:"北京"}, {id:2,name:"邯郸"}],
qu: {id_1:[{id:3,name:"海淀区"}, {id:4,name:"东城区"}],
id_2:[{id:5,name:"南"}, {id:6,name:"东"}]},
jiedao: {id_3:[{id:11,name:"盛唐饭店"},{id:12,name:"知春路"},{id:13,name:"稻香园"}],
id_4:[{id:14,name:"东四十条"},{id:15,name:"港澳中心"},{id:16,name:"东直门"}],
id_5:[{id:17,name:"电力小区"},{id:18,name:"电力医院"}],
id_6:[{id:19,name:"北大青鸟"},{id:20,name:"福瑞特"},{id:21,name:"东信家园"}]}
};
function init(){
/*处理省下拉列表框*/
var shengHTML = document.getElementById("sheng");
// 移除下拉列表中原有内容
while(shengHTML.childNodes.length > 0){
shengHTML.removeChild(
shengHTML.childNodes[0]);
}
// 添加option
var sheng = data.sheng;
for(var i = 0; i< sheng.length; i++){
var op = document.createElement("option");
op.value = sheng[i].id;
var text = document.createTextNode(sheng[i].name);
op.appendChild(text);
shengHTML.appendChild(op);
}
/*处理区下拉列表框*/
var quHTML = document.getElementById("qu");
// 移除下拉列表中原有内容
while(quHTML.childNodes.length > 0){
quHTML.removeChild(
quHTML.childNodes[0]);
}
// 添加option 这里的qu代表第一个省的所有区
var qu = data.qu["id_" + sheng[0].id];
for(var i = 0; i< qu.length; i++){
var op = document.createElement("option");
op.value = qu[i].id;
var text = document.createTextNode(qu[i].name);
op.appendChild(text);
quHTML.appendChild(op);
}
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表第一个区下的所有街道
var jiedao = data.jiedao["id_"+qu[0].id];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
function shengChange(){
var shengHTML = document.getElementById("sheng");
//alert('id是 ' + shengHTML.options[shengHTML.selectedIndex].value);
var shengId = shengHTML.options[shengHTML.selectedIndex].value;
/*处理区下拉列表框*/
var quHTML = document.getElementById("qu");
// 移除下拉列表中原有内容
while(quHTML.childNodes.length > 0){
quHTML.removeChild(
quHTML.childNodes[0]);
}
// 添加option 这里的qu代表所选中的省的所有区
var qu = data.qu["id_" + shengId];
for(var i = 0; i< qu.length; i++){
var op = document.createElement("option");
op.value = qu[i].id;
var text = document.createTextNode(qu[i].name);
op.appendChild(text);
quHTML.appendChild(op);
}
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表第一个区下的所有街道
var jiedao = data.jiedao["id_"+qu[0].id];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
function quChange(){
var quHTML = document.getElementById("qu");
//alert('id是 ' + quHTML.options[quHTML.selectedIndex].value);
var quId = quHTML.options[quHTML.selectedIndex].value;
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表所选中的区下的所有街道
var jiedao = data.jiedao["id_"+quId];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
</script>
</head>
<body>
<input type="button" value="初始化" onclick="init();"/>
<select id="sheng" onchange="shengChange();"></select>
<select id="qu" onchange="quChange();"></select>
<select id="jiedao"></select>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
var data = {
sheng: [{id:1,name:"北京"}, {id:2,name:"邯郸"}],
qu: {id_1:[{id:3,name:"海淀区"}, {id:4,name:"东城区"}],
id_2:[{id:5,name:"南"}, {id:6,name:"东"}]},
jiedao: {id_3:[{id:11,name:"盛唐饭店"},{id:12,name:"知春路"},{id:13,name:"稻香园"}],
id_4:[{id:14,name:"东四十条"},{id:15,name:"港澳中心"},{id:16,name:"东直门"}],
id_5:[{id:17,name:"电力小区"},{id:18,name:"电力医院"}],
id_6:[{id:19,name:"北大青鸟"},{id:20,name:"福瑞特"},{id:21,name:"东信家园"}]}
};
function init(){
/*处理省下拉列表框*/
var shengHTML = document.getElementById("sheng");
// 移除下拉列表中原有内容
while(shengHTML.childNodes.length > 0){
shengHTML.removeChild(
shengHTML.childNodes[0]);
}
// 添加option
var sheng = data.sheng;
for(var i = 0; i< sheng.length; i++){
var op = document.createElement("option");
op.value = sheng[i].id;
var text = document.createTextNode(sheng[i].name);
op.appendChild(text);
shengHTML.appendChild(op);
}
/*处理区下拉列表框*/
var quHTML = document.getElementById("qu");
// 移除下拉列表中原有内容
while(quHTML.childNodes.length > 0){
quHTML.removeChild(
quHTML.childNodes[0]);
}
// 添加option 这里的qu代表第一个省的所有区
var qu = data.qu["id_" + sheng[0].id];
for(var i = 0; i< qu.length; i++){
var op = document.createElement("option");
op.value = qu[i].id;
var text = document.createTextNode(qu[i].name);
op.appendChild(text);
quHTML.appendChild(op);
}
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表第一个区下的所有街道
var jiedao = data.jiedao["id_"+qu[0].id];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
function shengChange(){
var shengHTML = document.getElementById("sheng");
//alert('id是 ' + shengHTML.options[shengHTML.selectedIndex].value);
var shengId = shengHTML.options[shengHTML.selectedIndex].value;
/*处理区下拉列表框*/
var quHTML = document.getElementById("qu");
// 移除下拉列表中原有内容
while(quHTML.childNodes.length > 0){
quHTML.removeChild(
quHTML.childNodes[0]);
}
// 添加option 这里的qu代表所选中的省的所有区
var qu = data.qu["id_" + shengId];
for(var i = 0; i< qu.length; i++){
var op = document.createElement("option");
op.value = qu[i].id;
var text = document.createTextNode(qu[i].name);
op.appendChild(text);
quHTML.appendChild(op);
}
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表第一个区下的所有街道
var jiedao = data.jiedao["id_"+qu[0].id];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
function quChange(){
var quHTML = document.getElementById("qu");
//alert('id是 ' + quHTML.options[quHTML.selectedIndex].value);
var quId = quHTML.options[quHTML.selectedIndex].value;
/*处理街道下拉列表框*/
var jiedaoHTML = document.getElementById("jiedao");
// 移除下拉列表中原有内容
while(jiedaoHTML.childNodes.length > 0){
jiedaoHTML.removeChild(
jiedaoHTML.childNodes[0]);
}
// 添加option 这里的jiedao代表所选中的区下的所有街道
var jiedao = data.jiedao["id_"+quId];
for(var i = 0; i< jiedao.length; i++){
var op = document.createElement("option");
op.value = jiedao[i].id;
var text = document.createTextNode(jiedao[i].name);
op.appendChild(text);
jiedaoHTML.appendChild(op);
}
}
</script>
</head>
<body>
<input type="button" value="初始化" onclick="init();"/>
<select id="sheng" onchange="shengChange();"></select>
<select id="qu" onchange="quChange();"></select>
<select id="jiedao"></select>
</body>
</html>
<body>
<div id="ss"></div>
</body>
<script>
var menu = [
{"menu1":"人族","menu2":[
{"menu1":"大法师","menu2":[
{"menu1":"水元素"},
{"menu1":"暴风雪"},
{"menu1":"辉煌光环"},
{"menu1":"瞬间移动"}
]},
{"menu1":"山丘之王","menu2":[
{"menu1":"风暴之锤"},
{"menu1":"锥地"},
{"menu1":"锥晕"},
{"menu1":"天神下凡"}
]},
{"menu1":"圣骑士","menu2":[
{"menu1":"光"},
{"menu1":"无敌"},
{"menu1":"光环"},
{"menu1":"复活"}
]},
{"menu1":"血法师","menu2":[
{"menu1":"火焰"},
{"menu1":"吸蓝"},
{"menu1":"虚无"},
{"menu1":"神鸟凤凰"}
]}
]},
{"menu1":"兽族","menu2":[
{"menu1":"贱圣","menu2":[
{"menu1":"疾风步"},
{"menu1":"影分身"},
{"menu1":"致命一击"},
{"menu1":"剑刃风暴"}
]},
{"menu1":"先知男","menu2":[
{"menu1":"狼"},
{"menu1":"日"},
{"menu1":"闪电链"},
{"menu1":"地震"}
]},
{"menu1":"牛头人酋长","menu2":[
{"menu1":"冲击波"},
{"menu1":"阵地"},
{"menu1":"耐久光环"},
{"menu1":"复活"}
]},
{"menu1":"小YY","menu2":[
{"menu1":"变动物"},
{"menu1":"治疗波"},
{"menu1":"小蛇棒子"},
{"menu1":"全体无敌"}
]}
]},
{"menu1":"不死族","menu2":[
{"menu1":"死亡骑士","menu2":[
{"menu1":"大便"},
{"menu1":"光环"},
{"menu1":"吃人"},
{"menu1":"复尸体"}
]},
{"menu1":"巫妖","menu2":[
{"menu1":"暴冰"},
{"menu1":"冰甲"},
{"menu1":"吃人"},
{"menu1":"死亡凋零"}
]},
{"menu1":"恐惧魔王","menu2":[
{"menu1":"蝙蝠"},
{"menu1":"睡觉"},
{"menu1":"吸血光环"},
{"menu1":"黄色石头人"}
]},
{"menu1":"小强王子","menu2":[
{"menu1":"小小强"},
{"menu1":"倒刺"},
{"menu1":"身上长倒刺"},
{"menu1":"很多小小强"}
]}
]}
]
for(var i=0;i<3;i++)
{
var sele =document.createElement("select")
document.getElementById("ss").appendChild(sele)
}
for(var j=0;j<menu.length;j++)
{document.getElementById("ss").getElementsByTagName("select")[0].options.add(new Option(menu[j].menu1,j))
document.getElementById("ss").getElementsByTagName("select")[0].onchange=function(){change(this.selectedIndex)}
}
for(var j=0;j<menu[0].menu2.length;j++)
{document.getElementById("ss").getElementsByTagName("select")[1].options.add(new Option(menu[0].menu2[j].menu1,j))
document.getElementById("ss").getElementsByTagName("select")[1].onchange=function(){xchange(this.selectedIndex)}
}
for(var j=0;j<menu[0].menu2[0].menu2.length;j++)
{document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[0].menu2[0].menu2[j].menu1,j))}
function change(num){
document.getElementById("ss").getElementsByTagName("select")[1].length=0
document.getElementById("ss").getElementsByTagName("select")[2].length=0
for(var i=0;i<menu[num].menu2.length;i++)
{document.getElementById("ss").getElementsByTagName("select")[1].options.add(new Option(menu[num].menu2[i].menu1,i))}
for(var i=0;i<menu[num].menu2[0].menu2.length;i++)
{document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[num].menu2[0].menu2[i].menu1,i))}
}function xchange(num){
document.getElementById("ss").getElementsByTagName("select")[2].length=0
var num0= document.getElementById("ss").getElementsByTagName("select")[0].selectedIndex
for(var i=0;i<menu[num0].menu2[num].menu2.length;i++)
{document.getElementById("ss").getElementsByTagName("select")[2].options.add(new Option(menu[num0].menu2[num].menu2[i].menu1,i))}
}
</script>