• javascrip实现下拉框联动


     实际项目中几个下拉框需要联动是经常需要实现的功能.
    一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动.
    不妨定义几个js的数据对象来描叙这种几个下拉框数据间的关系.这样数据关系明了,实现也简单.
    见以下用javascript实现下拉框联动的实例

    <script>
     var itemAry1=new Array();
     var itemAry2=new Array();
     //定义第一个下拉框的数据结构 
     function Item(name,value)
     {
      this.name=name;
      this.value=value;
     }
     //定义第二个下拉框的数据结构多了一个指向父项的数据
     function SubItem(parent,name,value)
     {
      this.parent=parent;
      this.name=name;
      this.value=value;
     }
     
     //组织下拉框的数据
     itemAry1[0]=new Item(1,'item1');
     itemAry1[1]=new Item(2,'item2');
     
     itemAry2[0]=new SubItem(1,"1","subItem1");
     itemAry2[1]=new SubItem(1,"2","subItem2");
     itemAry2[2]=new SubItem(1,"3","subItem3");
     itemAry2[3]=new SubItem(2,"4","subItemA");
     itemAry2[4]=new SubItem(2,"5","subItemB");
     
     //初始化第一个下拉框数据
     function initOption()
     {
      for(var i=0;i<itemAry1.length;i++)
      {
       document.getElementById("selectItem1").add(new Option(itemAry1[i].value,itemAry1[i].name));
      }
      changeOption(document.getElementById("selectItem1").value);
      }
     
      //联动第二个下拉框的数据
      function changeOption(selectOpt)
      {
       document.getElementById("selectItem2").length=0;
       for(var j=0;j<itemAry2.length;j++)
       {
        if(itemAry2[j].parent==selectOpt)
        {
         document.getElementById("selectItem2").add(new Option(itemAry2[j].value,itemAry2[j].name));
        }
       }
      }
    </script>
    <html>
    <body οnlοad=initOption()>
    <select id="selectItem1" name="selectItem1" οnchange=changeOption(this.value)>
    </select>
    <select id="selectItem2" name="selectItem2"></select>
    </body>
    </html>

  • 相关阅读:
    Jeronimo's List Gym
    Jeronimo's List Gym
    Text Editor Gym
    Text Editor Gym
    树上最长距离模板
    树上最长距离模板
    Purple Rain Gym
    数制转化2
    小括号匹配
    数制转化
  • 原文地址:https://www.cnblogs.com/xiejava/p/15171481.html
Copyright © 2020-2023  润新知