javascript 实现联动的下拉菜单

<form name="f1"><select name="s1"
 οnchange="chg(document.f1.s1,document.f1.s2)">
 <option value="江西">江西</option>
 <option value="福建">福建</option>
</select><select name="s2">
 <option value="1">1</option>
</select></form>
<script>
 //创建对象,数据,值,文本
 function obj(aData, aValue, aText) {
  this.Data = aData;
  this.Value = aValue;
  this.Text = aText;
 }
 //设置选项数据数组,可以添加多个参数为"源地址,选择值,选择文本"
 var Set_data = new Array(
                       new obj('江西', '南昌', '南昌'),
                       new obj('江西', '九江','九江'),
                       new obj('福建', '福州', '福州'),
                       new obj('福建', '厦门', '厦门'));
 //该函数接受两个参数——两个下拉菜单
 function chg(parent, child) {
  //以父菜单的选中选项的值,子菜单,和选项数数据组为参数调用chg函数 
  chgComitem(parent.options[parent.selectedIndex].value, child, Set_data);
 }
 function chgComitem(parentValue, child, objs) {
  //改变子菜单 //1.以子菜单为参数调用函数 
  DelAllComitem(child);
  //2.遍历所有的选项数据 
  for (i = 0; i < objs.length; i++) {
   //如果选项数据的Data与父菜单选中值一样的话  
   if (objs[i].Data == parentValue)
    //3.以子菜单,选项数据的值,选项数据的文本作为参数调用AddComitem   
    AddComitem(child, objs[i].Value, objs[i].Text);
  }
 }
 //1.删除子菜单的所有元素
 function DelAllComitem(aList) {
  //传入的是select元素,让options全为null 
  for (i = aList.options.length - 1; i >= 0; i--)
   aList.options[i] = null;
 }
 //3.添加子菜单的元素
 function AddComitem(aList, aValue, aText) {
  //用传入的文本和值来创建option 
  var aOption = new Option(aText, aValue);
  //插入option(注:length属性比最大下标大1) 
  aList.options[aList.options.length] = aOption;
 }
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值