小弟刚学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>

解决方案 »

  1.   


    <!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>
      

  2.   

    <select id="city" onchange="set_district(this,document.getElementById('district')">
      <option selected="selected" value="">请选择</option>
      </select>红色部分少写了一个括号~·
      

  3.   

    LZ用firefox么?如果漏了括号什么的,firebug应该是能够指出来的吧,以前我也常这样,有时候漏了括号,有时候一些个函数或者方法大写的写成小写,有时候单词拼错,有时候页面要输入中文的话,最后的“;”也变成了“;”,各种郁闷,其实我原来是不喜欢firefox的,到现在为止用的一直都是chrome,速度快,而且界面简洁,这一点我很喜欢,现在一般只在调试网页的时候用firefox,firebug真是好东西
      

  4.   

    firefox的firebug  不错建议楼主使用
      

  5.   

    另一种风格支持LZ自学成才,想当年,我也是自学JS
    <!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>
      

  6.   

    不如看这个
    http://tg4a34.mail.126.com/app/wp/doGetFile.jsp?sid=lAerYzyobZMdUYqOawoohQGibfJRGAoY&mode=download&mid=67:1tbiQxWRsk0vIvw1kwABsu