分层列表

siser344

浏览: 22182 次
性别:
来自: 广州

最近访客更多访客>>

overloving

kokorodo

love康忙丽丽

amosleaf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

编程 JavaScript HTML Blog F#

三层关联下拉列表的编程思路：

来源：(http://blog.sina.com.cn/s/blog_4f9ce8f30100ip1u.html) - JAVA软件工程师--关联下拉列表（JavaScript)_徐亮Bright_新浪博客
本例子是两次关联，对于三层的，情况类似。如要降低编程难度，可以考虑用onblur="f()"和加if-else判断解决。当用户选择了第二层的选项离开后，调用f()函数。该函数通过var obj3=document.getElementById(); var index=obj3.options.selectedIndex得到选择的下标index.这样分解后，就变为二层关联问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>relatedSelect.html</title>
    <style>
    #dhead {
font-size: 20;
background-color: red;
color: green;
width: 400;
height: 300;
}

#dfirst {
background-color: blue;
width: 400;
height: 70;
}

#dsecond {
background-color: yellow;
width: 400;
height: 240;
}
   </style>
   <script>
   var arr=new Array();
    arr[0]=[new Option("--方向--","-1")];
    arr[1]=[new Option("图形计算","10"),new Option("科学计算","11"),new Option("软件工程","12")];
    arr[2]=[new Option("商务英语","20"),new Option("对外英语","21")];
   function cc(index){
   alert(index);
    var obj2=document.getElementById('s2');
     var len=arr[index].length;
     alert("len:"+len);
obj2.options.length=len;
alert(obj2.options.length);
for(var i=0;i<len;i++){
obj2.options[i]=arr[index][i];
alert(obj2.options[i]);
}
}
   </script>
</head>
<body>
    <div id="head">
    <div id="dfirst" style="font-size:30px">关联下拉列表</div>
    <div id="dsecond">
    <form>
    <select name="major" id="s1" onchange="cc(this.selectedIndex);">
    <option value="major">--专业--</option>
    <option value="computer">计算机</option>
    <option value="english">英语 </option>
    </select>
    <select name="direction" id="s2">
    <option value="-1">--方向--</option>
    </select>
    </form>
    </div>

    </div>
</body>
</html>

分享到：