软件开发,软件定制,网站制作,网店定制
点击给我发消息
您的位置:网站首页 > 技术文章 > JavaScript技术

用Javascript实现两级下拉框联动

作者:admin 来源:原创 日期:2009-11-20 20:39:20 人气: 标签:
导读:用Javascript实现两级下拉框联动的示例

在线演示

<select id="menu1">
<option >请选择</option>
<option value='一年级'>一年级</option>
<option value='二年级'>二年级</option>
<option value='三年级'>三年级</option>
<option value='四年级'>四年级</option>
<option value='五年级'>五年级</option>
<option value='六年级'>六年级</option>
<option value='办公室'>办公室</option>
</select>
<select id=department>
<option>--</option>
</select>
</BODY>
</HTML>
<script type="text/javascript">
var menu1=document.getElementById('menu1');
var department=document.getElementById('department');
menu1.onchange=function(){
 if(menu1.value=='一年级'){
  department.options.length=0;
  department.options.add(new Option('一(1)','一(1)'));
  department.options.add(new Option('一(2)','一(2)'));
  department.options.add(new Option('一(3)','一(3)'));
  department.options.add(new Option('一(4)','一(4)'));
  department.options.add(new Option('一(5)','一(5)'));
  department.options.add(new Option('一(6)','一(6)'));
  department.options.add(new Option('一(7)','一(7)'));
  department.options.add(new Option('一(8)','一(8)'));
 }
 else if(menu1.value=='二年级'){
  department.options.length=0;
  department.options.add(new Option('二(1)','二(1)'));
  department.options.add(new Option('二(2)','二(2)'));
  department.options.add(new Option('二(3)','二(3)'));
  department.options.add(new Option('二(4)','二(4)'));
  department.options.add(new Option('二(5)','二(5)'));
  department.options.add(new Option('二(6)','二(6)'));
  department.options.add(new Option('二(7)','二(7)'));
  department.options.add(new Option('二(8)','二(8)'));
 }
 else if(menu1.value=='三年级'){
  department.options.length=0;
  department.options.add(new Option('三(1)','三(1)'));
  department.options.add(new Option('三(2)','三(2)'));
  department.options.add(new Option('三(3)','三(3)'));
  department.options.add(new Option('三(4)','三(4)'));
  department.options.add(new Option('三(5)','三(5)'));
  department.options.add(new Option('三(6)','三(6)'));
  department.options.add(new Option('三(7)','三(7)'));
  department.options.add(new Option('三(8)','三(8)'));
 }
 else if(menu1.value=='四年级'){
  department.options.length=0;
  department.options.add(new Option('四(1)','四(1)'));
  department.options.add(new Option('四(2)','四(2)'));
  department.options.add(new Option('四(3)','四(3)'));
  department.options.add(new Option('四(4)','四(4)'));
  department.options.add(new Option('四(5)','四(5)'));
  department.options.add(new Option('四(6)','四(6)'));
  department.options.add(new Option('四(7)','四(7)'));
  department.options.add(new Option('四(8)','四(8)'));
 }
 else if(menu1.value=='五年级'){
  department.options.length=0;
  department.options.add(new Option('五(1)','五(1)'));
  department.options.add(new Option('五(2)','五(2)'));
  department.options.add(new Option('五(3)','五(3)'));
  department.options.add(new Option('五(4)','五(4)'));
  department.options.add(new Option('五(5)','五(5)'));
  department.options.add(new Option('五(6)','五(6)'));
  department.options.add(new Option('五(7)','五(7)'));
  department.options.add(new Option('五(8)','五(8)'));
 }
 else if(menu1.value=='六年级'){
  department.options.length=0;
  department.options.add(new Option('六(1)','六(1)'));
  department.options.add(new Option('六(2)','六(2)'));
  department.options.add(new Option('六(3)','六(3)'));
  department.options.add(new Option('六(4)','六(4)'));
  department.options.add(new Option('六(5)','六(5)'));
  department.options.add(new Option('六(6)','六(6)'));
  department.options.add(new Option('六(7)','六(7)'));
  department.options.add(new Option('六(8)','六(8)'));
 }
 else if(menu1.value=='办公室'){
  department.options.length=0;
  department.options.add(new Option('校长室','校长室'));
  department.options.add(new Option('办公室','办公室'));
  department.options.add(new Option('会计室','会计室'));
  department.options.add(new Option('人事室','人事室'));
  department.options.add(new Option('档案室','档案室'));
  department.options.add(new Option('教科室','教科室'));
  department.options.add(new Option('教导处','教导处'));
  department.options.add(new Option('总务处','总务处'));
 }
 else{
  department.options.length=0;
  department.options.add(new Option("--",""));
 }
}
</script>

共有:条评论信息评论信息
发表评论
姓 名:
验证码: