黑马程序员技术交流社区

标题: 网页使用下拉列表框实现级联效果 [打印本页]
作者: 王海亮    时间: 2012-8-17 03:30
标题: 网页使用下拉列表框实现级联效果
为啥我添加二级列表的时候总是添加失败显示空白呢！大家帮我看看是不是代码写的有问题！
var list=new array();
list['北京市']=['东城区','西城区','海淀区','朝阳区','大兴区'];
list['河北省']=['石家庄','邯郸市','邢台市','保定市','廊坊市'];
list['内蒙古']=['呼市','包头市','赤峰市','鄂尔多斯','东胜'];
function shi(){
    var sheng=document.getElementById("sheng").value;
    var  shi=document.getElementById("shi");
    shi.options.length=0;
    for(var i in list){
        if(i==sheng){
            for(var j in list[i]){
                shi.add(new Option(list[i][j],list[i][j]),null);
                }
            }
        }
    }
作者: 吴小东    时间: 2012-8-17 18:45
本帖最后由 吴小东 于 2012-8-17 19:01 编辑

哥们，你这一开始定义数组的时候就出了问题。我自己写了一个级联，希望能对你有帮助，
javascript 虽然是弱语言但是对书写方面还是很要求规范的
  1. <script type="text/javascript">
  2.     var list = new Array("北京市","河北省","内蒙古");
  3.     var listBeiJing = ['东城区','西城区','海淀区','朝阳区','大兴区'];
  4.     var listHeBei = ['石家庄','邯郸市','邢台市','保定市','廊坊市'];
  5.     var listNeiMeng = ['呼市','包头市','赤峰市','鄂尔多斯','东胜'];
  6.    
  7.    
  8.     var list1 = new Array();   //把前面4个list 合并为一个 list1
  9.     list1 = {北京市:listBeiJing,河北省:listHeBei,内蒙古:listNeiMeng}
  10.    
  11.     function addSheng()   //加载页面的时候，把省份的信息加到一级下拉菜单中
  12.     {
  13.             var sheng = document.getElementById("sheng");
  14.             for(var i in list){
  15.             sheng.add(new Option(list[i],list[i]));  //返回值和显示值设置为一样
  16.             }
  17.     }
  18.     function addShi(sheng)
  19.     {
  20.             alert(sheng);
  21.             var shi = document.getElementById("shi");
  22.             shi.length = 0;  
  23.                    for(var i in list1[sheng])     //这里每次得到的省份值所对应的数组，例如北京市 那么这里的 list1["北京市"] 就相当于 listBeiJing
  24.                    {
  25.                            shi.add(new Option(list1[sheng][i],list1[sheng][i]));  //然后遍历加载到二级菜单
  26.                    }
  27.     }
  28.   
  29.   </script>
  30.   <body onload="addSheng()">
  31.     <select id="sheng" onchange="addShi(this.value)">   //当每一次省份的菜单改变就调用一次这个方法，
  32.                                                                                         // 把value也就是选中的省份作为参数传给方法addShi(sheng)
  33.     <option>--请选择省份--</option>
  34.     </select>
  35.     <select id="shi">
  36.     </select>
  37.   </body>
复制代码
刚吃了两口饭 想起没有写注释 来补上
作者: 王海亮    时间: 2012-8-18 13:08
吴小东 发表于 2012-8-17 18:45
哥们，你这一开始定义数组的时候就出了问题。我自己写了一个级联，希望能对你有帮助，
javascript 虽然是弱 ...

肯定是数组的问题
作者: 王海亮    时间: 2012-8-18 13:09
吴小东 发表于 2012-8-17 18:45
哥们，你这一开始定义数组的时候就出了问题。我自己写了一个级联，希望能对你有帮助，
javascript 虽然是弱 ...

定义数组肯定有问题
作者: 王海亮    时间: 2012-8-21 19:45
谁能解释这段代码！为什么会出错



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2