小弟刚学js,现在要做一个三级级联菜单,但是不懂啊,自学的没人关注,下面的这段代码出现了一点小问题,求高人指正!
<script>
cities = new Object();
cities['江苏省']=new Array('苏州市', '无锡市','南京市', '扬州市');
cities['广东省']=new Array('广州市', '深圳市', '珠海市');
districts = new Object();
districts['苏州市']=new Array('金阊区','沧浪区','吴中区','相城区','平江区','虎丘区');
districts['无锡市']=new Array('崇安区','南长区','北塘区','惠山区','锡山区','滨湖区');
districts['南京市']=new Array('鼓楼','建邺','下关','玄武','秦淮');
districts['扬州市']=new Array('广陵区','维扬区','邗江区');
districts['广州市']=new Array('白云区','海珠区','荔湾区','天河区','黄埔区','萝岗区');
districts['深圳市']=new Array('福田区','罗湖区','南山区','盐田区','宝安区','龙岗区');
districts['珠海市']=new Array('香洲区','斗门区','金湾区','横琴新区');
function set_city(province, city)
{
var pv, cv;
var i, ii;
pv=province.value;
cv=city.value;
city.length=1;
if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++)
{
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}}
function set_district(city,district)
{
var cv,dv;
var i,ii;
cv=city.value;
dv=district.value;
district.length=1;
if(cv=='0') return;
if(typeof(districts[cv])=='undefined') return;
for(i=0;i<districts[cv].length;i++)
{
ii =i+1;
district.options[ii] = new Option();
district.options[ii].text =districts[cv][i];
district.options[ii].value =districts[cv][i];
}
}
</script>
下面是body部分代码:
<table width="100%" border="0" cellspacing="5px">
<tr>
<td align="center">省:</td>
<td>
<select id="province" onchange="set_city(this, document.getElementById('city'))">
<option selected="selected">请选择</option>
<option value=江苏省>江苏省</option>
<option value=广东省>广东省</option>
</select>
</td>
</tr>
<tr>
<td align="center">市:</td>
<td>
<select id="city" onchange="set_district(this,document.getElementById('district')">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td align="center">县(区):</td>
<td>
<select id="district"><option value="" selected="selected">请选择</option></select>
</td>
</tr>
</table>
<script>
cities = new Object();
cities['江苏省']=new Array('苏州市', '无锡市','南京市', '扬州市');
cities['广东省']=new Array('广州市', '深圳市', '珠海市');
districts = new Object();
districts['苏州市']=new Array('金阊区','沧浪区','吴中区','相城区','平江区','虎丘区');
districts['无锡市']=new Array('崇安区','南长区','北塘区','惠山区','锡山区','滨湖区');
districts['南京市']=new Array('鼓楼','建邺','下关','玄武','秦淮');
districts['扬州市']=new Array('广陵区','维扬区','邗江区');
districts['广州市']=new Array('白云区','海珠区','荔湾区','天河区','黄埔区','萝岗区');
districts['深圳市']=new Array('福田区','罗湖区','南山区','盐田区','宝安区','龙岗区');
districts['珠海市']=new Array('香洲区','斗门区','金湾区','横琴新区');
function set_city(province, city)
{
var pv, cv;
var i, ii;
pv=province.value;
cv=city.value;
city.length=1;
if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++)
{
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}}
function set_district(city,district)
{
var cv,dv;
var i,ii;
cv=city.value;
dv=district.value;
district.length=1;
if(cv=='0') return;
if(typeof(districts[cv])=='undefined') return;
for(i=0;i<districts[cv].length;i++)
{
ii =i+1;
district.options[ii] = new Option();
district.options[ii].text =districts[cv][i];
district.options[ii].value =districts[cv][i];
}
}
</script>
下面是body部分代码:
<table width="100%" border="0" cellspacing="5px">
<tr>
<td align="center">省:</td>
<td>
<select id="province" onchange="set_city(this, document.getElementById('city'))">
<option selected="selected">请选择</option>
<option value=江苏省>江苏省</option>
<option value=广东省>广东省</option>
</select>
</td>
</tr>
<tr>
<td align="center">市:</td>
<td>
<select id="city" onchange="set_district(this,document.getElementById('district')">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td align="center">县(区):</td>
<td>
<select id="district"><option value="" selected="selected">请选择</option></select>
</td>
</tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="100%" border="0" cellspacing="5px">
<tr>
<td align="center">省:</td>
<td>
<select id="province" onchange="set_city(this, document.getElementById('city'))">
<option selected="selected">请选择</option>
<option value=江苏省>江苏省</option>
<option value=广东省>广东省</option>
</select>
</td>
</tr>
<tr>
<td align="center">市:</td>
<td>
<select id="city" onchange="set_district(this,document.getElementById('district'))">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td align="center">县(区):</td>
<td>
<select id="district"><option value="" selected="selected">请选择</option></select>
</td>
</tr>
</table>
<script>
cities = new Object();
cities['江苏省']=new Array('苏州市', '无锡市','南京市', '扬州市');
cities['广东省']=new Array('广州市', '深圳市', '珠海市');
districts = new Object();
districts['苏州市']=new Array('金阊区','沧浪区','吴中区','相城区','平江区','虎丘区');
districts['无锡市']=new Array('崇安区','南长区','北塘区','惠山区','锡山区','滨湖区');
districts['南京市']=new Array('鼓楼','建邺','下关','玄武','秦淮');
districts['扬州市']=new Array('广陵区','维扬区','邗江区');
districts['广州市']=new Array('白云区','海珠区','荔湾区','天河区','黄埔区','萝岗区');
districts['深圳市']=new Array('福田区','罗湖区','南山区','盐田区','宝安区','龙岗区');
districts['珠海市']=new Array('香洲区','斗门区','金湾区','横琴新区');
function set_city(province, city)
{
var pv, cv;
var i, ii;
pv=province.value;
cv=city.value;
city.length=1;
if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++)
{
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}}
function set_district(city,district)
{
var cv,dv;
var i,ii;
cv=city.value;
dv=district.value;
district.length=1;
if(cv=='0') return;
if(typeof(districts[cv])=='undefined') return;
for(i=0;i<districts[cv].length;i++)
{
ii =i+1;
district.options[ii] = new Option();
district.options[ii].text =districts[cv][i];
district.options[ii].value =districts[cv][i];}}
</script> </body>
</html>
<option selected="selected" value="">请选择</option>
</select>红色部分少写了一个括号~·
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="100%" border="0" cellspacing="5px">
<tr>
<td align="center">省:</td>
<td><select id="province" onchange="">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td align="center">市:</td>
<td><select id="city" onchange="">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td align="center">县(区):</td>
<td><select id="district">
<option selected="selected" value="">请选择</option>
</select>
</td>
</tr>
</table>
<script>
(function(p, c, d) {
var cities = new Object();
cities['江苏省'] = new Array('苏州市', '无锡市','南京市', '扬州市');
cities['广东省'] = new Array('广州市', '深圳市', '珠海市');
var districts = new Object();
districts['苏州市'] = new Array('金阊区','沧浪区','吴中区','相城区','平江区','虎丘区');
districts['无锡市'] = new Array('崇安区','南长区','北塘区','惠山区','锡山区','滨湖区');
districts['南京市'] = new Array('鼓楼','建邺','下关','玄武','秦淮');
districts['扬州市'] = new Array('广陵区','维扬区','邗江区');
districts['广州市'] = new Array('白云区','海珠区','荔湾区','天河区','黄埔区','萝岗区');
districts['深圳市'] = new Array('福田区','罗湖区','南山区','盐田区','宝安区','龙岗区');
districts['珠海市'] = new Array('香洲区','斗门区','金湾区','横琴新区');
var list = [$(p), $(c), $(d)]; //省,市,区
var data = [cities, districts]; //列表数据
for(each in cities) {//初始化时加载省份列表
addOption(list[0], each, each);
}
for(var n = 0; n < list.length; n++) {
(function(k){//给下拉列表绑定事件
list[k].onchange = function() {
selected(k);
}
})(n);
}
/**
* 根据当前下拉列表的选择对下一级下拉列表进行重置
* level[number] 当前下拉列表的级别(0:省;1:市;2:区)
*/
function selected(level) {
var pList = list[level];
var v = pList.options[pList.selectedIndex].value; //当前下拉列表的选择项的值
var index = level + 1;
if(index < list.length) { //判断是否己超过最低级别区
var sList = list[index];
var sData = data[index - 1][v];
delOptions(sList); //删除子级别的项目
if(v) { //根据当前下拉列表选择项的值确定是否加载新的列表到子级
for(i in sData) {
addOption(sList, sData[i], sData[i]);
}
sList.selectedIndex = 0; //设置子列表的初始选择项为第一项
}
selected(level + 1); //继续重置下一级别的下拉列表
}
}
//获取DOM对象
function $(id) {
return typeof(id) == 'string'? document.getElementById(id) : id;
}
//删除下列表除第一项之外的其它项
function addOption(obj, text, value) {
var op = document.createElement('option');
op.text = text;
op.value = value;
obj.options.add(op);
}
//添加新项到下拉列表
function delOptions(obj) {
while(obj.options.length > 1) {
obj.remove(obj.options.length - 1);
}
}
})("province", "city", 'district');
</script>
</body>
</html>
http://tg4a34.mail.126.com/app/wp/doGetFile.jsp?sid=lAerYzyobZMdUYqOawoohQGibfJRGAoY&mode=download&mid=67:1tbiQxWRsk0vIvw1kwABsu