js 省市联动的一个二级菜单问题，修改取得默认值

你可以这么修改，里面的文字可以改成变量
<!DOCTYPE">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{width:88px;}
</style>
<script type="text/javascript">
var aProvince=['北京','天津','河北'];
 
var aCity=[['','东城','西城','朝阳','丰台','石景山','海淀','门头沟','房山','通州','顺义','昌平','大兴','平谷','怀柔','密云','延庆'],['和平','河东','河西','南开','河北','红桥','东丽','西青','津南','北辰','宁河','武清','静海','宝坻','蓟县','滨海新区'],['石家庄','唐山','秦皇岛','邯郸','邢台','保定','张家口','承德','沧州','廊坊','衡水']];
 
window.onload=function(){
    var oProvince=document.getElementById('province');
    var oCity=document.getElementById('city');
    var oBtn=document.getElementById('btn1');
    var selectedProvince = 0;
    for(var i=0;i<aProvince.length;i++){
        oProvince.options[i]=new Option(aProvince[i]);
        //取得从数据库读取过来的省得数据
        if(oProvince.options[i].value=="天津")
        {
            oProvince.options[i].selected=true;
            selectedProvince = i;
        }
    }
    for(var i=0;i<aCity[0].length;i++){
        oCity.options[i]=new Option(aCity[selectedProvince][i]);
        if(oCity.options[i].value=="武清")
        {
            oCity.options[i].selected=true;
        }
    }
     
    oProvince.onchange=function(){
        oCity.length=0;
        for(var i=0;i<aCity[this.selectedIndex].length;i++){
            oCity.options[i]=new Option(aCity[this.selectedIndex][i]);
        }
    };
 
};
</script>
</head>
<body>
<form name="form1">
    <select name="province" id="province"></select>
    <select name="city" id="city"></select>
    <input type="button" value="提交" id="btn1" />
</form>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>无标题文档</title>
    <style type="text/css">
    select{width:88px;}
    </style>
    <script type="text/javascript">
    var amainname=['头','颈','肩','肘','腰','腕','膝','踝'];
    var asubname=[[''],[''],['22','左肩','右肩','中肩','肩膀'],[''],[''],[''],[''],['']];
    window.onload=function(){
        var omainname=document.getElementById('mainname');
        var osubname=document.getElementById('subname');
        var selectedMainname = 0;
        for(var i=0;i<amainname.length;i++)
        {
            omainname.options[i]=new Option(amainname[i]);      
            if(omainname.options[i].value=="肩")
            {
                omainname.options[i].selected=true ;
                selectedMainname = i;
            }
            
        }
        for(var j=0;j<asubname[0].length;j++)
        {
            osubname.options[j]=new Option(asubname[selectedMainname][j]);
    alert(osubname.options[j].value);
            if(osubname.options[j].value=="肩膀")
            {
             osubname.options[j].selected=true;
            }
            
        }
        
        omainname.onchange=function()
        {
            osubname.length=0;
            for(var i=0;i<asubname[this.selectedIndex].length;i++)
            {
                osubname.options[i]=new Option(asubname[this.selectedIndex][i]);
            }
        };
    };</script>
    </head>
    <body>
    <form name="form1">
        <select name="mainname" id="mainname"></select>
        <select name="subname" id="subname"></select>
        <input type="button" value="提交" id="btn1" />
    </form>
    </body>
    </html>
    这个是我现在运行的真实测试代码，可能有点问题，默认肩的二级不是肩膀，而是22
    但是部分显示有正确，不知道原因出现在哪儿了。
      

  2.   

    应该是
     for(var j=0;j<asubname[selectedMainname].length;j++)
    而不是
     for(var j=0;j<asubname[0].length;j++)