效果图如下:
实现方式:
主要使用了juery的数据结构
参考程序如下:
<html>
<head>
<script type="text/javascript">
var a={"sheng":[{"name":"请选择省","shi":[{"name":"请选择市","qu":["请选择区"]}]},
{"name":"江苏","shi":[{"name":"南京","qu":["南京1"]}]},
{"name":"浙江","shi":[{"name":"宁波","qu":["宁波1","宁波2"]},
{"name":"杭州","qu":["杭州1","杭州2"]}]},
{"name":"甘肃","shi":[{"name":"兰州","qu":["兰州1", "兰州2", "兰州3"]},
{"name":"天水","qu":["天水1", "天水2", "天水3"]},
{"name":"酒泉","qu":["酒泉1", "酒泉2", "酒泉3"]}]}]};
function shi(){
var shengs=document.getElementById("sheng");
var shis=document.getElementById("shi");
var shengindex=shengs.selectedIndex;
shis.options.length=0;
for(i=0;i<a.sheng[shengindex].shi.length;i++){
var text=a.sheng[shengindex].shi[i].name;
var value=a.sheng[shengindex].shi[i].name;
shis.options[shis.options.length]=new Option(text,value);
}
qu();
}
function qu(){
var shengs=document.getElementById("sheng");
var shis=document.getElementById("shi");
var qus=document.getElementById("qu");
var shengindex=shengs.selectedIndex;
var shiindex=shis.selectedIndex;
qus.options.length=0;
for(i=0;i<a.sheng[shengindex].shi[shiindex].qu.length;i++){
var text=a.sheng[shengindex].shi[shiindex].qu[i];
var value=a.sheng[shengindex].shi[shiindex].qu[i];
qus.options[qus.options.length]=new Option(text,value);
}
}
</script>
</head>
<body>
<select id="sheng" onclick="shi()">
<script type="text/javascript">
for(i=0;i<a.sheng.length;i++){
document.write("<option value='"+a.sheng[i].name+"'>"+a.sheng[i].name+"</option>");
}
</script>
</select>
<select id="shi" onclick="qu()">
<option>请选择市</option>
</select>
<select id="qu">
<option>请选择区</option>
</select>
</body>
</html>