多级<select>选择的实现（利用selectedIndex属性）

2019独角兽企业重金招聘Python工程师标准>>>

希望实现的功能：当用户做板块选择时，分类选项栏会显示相应的可选选项

下面是html部分：

<form >
 板块： <select id="hyh" onclick="getselect()" >
            <option>--请先选择此项--</option>
            <option>主页</option>
            <option>EDP</option>
            <option>EMBA</option>
            <option>MBA</option>
        </select>
  分类： <select  name="type" >
            <option >--请先选择板块--</option>
            <volist name="types" id="type">
            <option style="display: none" name="hyh1" value="{$key}" >{$type}</option>
            </volist>
        </select>
      <input type="submit" value='筛选' class="btn btn-default"
          onclick='hyherror();filter_news(); return false;' />
      <input type="submit" value='创建' class="btn btn-default"
          onclick='create_news(); return false;' />
    </form>

下面是js部分：

<script type="text/javascript">
function getselect()
  {
  var x=document.getElementById("hyh").selectedIndex;
   var y=document.getElementsByName("hyh1");
  switch(x)
{
case 0:
  var a = new Array();  
    break;    
case 1:
 var a = new Array(0,1,2,3,4,5); 
  break;
case 2:
 var a = new Array(16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,36,37);  
  break;
case 3:
 var a = new Array(6,7,8,9,10);  
  break;
case 4:
 var a = new Array(11,12,13,14,15);  
  break;
  default:
    var a = new Array();    
}
for (var i=0;i<38;i++){
    if(a.indexOf(i)>=0){
    y[i].style.display="inline";
     y[i].selected="selected";
     }else{ y[i].style.display="none";}
  } 
  }
  function hyherror()
  {
      var x2=document.getElementById("hyh").selectedIndex;
      if(x2===0){
      var y2=document.getElementsByName("hyh1");
      y2[0].style.display="inline";
     y2[0].selected="selected";
      }
  }
</script>  

算法思路：

1. 分类选项栏会罗列出全部的选项，不过在一开始时，所有选项均为“display：none”不予显示。
2. 在用户每次点击板块选项栏时触发js，x选择器得到板块选项栏的索引值，y选择器得到所有的选项元素。
3. 根据x得到的不同索引值，创建不同的数组，数组中包含的是要显示的选项的排序号
4. js将从1-40（选项个数最大值）进行遍历，判断是否存在于数组中，如果存在即显示该条选项，否则不显示。并且会将最后一个选项作为默认选项。
5. hyherror()函数主要为了处理当用户什么都不选时，默认选项为空，导致后续的操作错误。该事件绑定于两个按钮上，点击按钮时会先判断用户是否没有选择正确的选项，如果没有，则会给选项卡赋默认值。如果否，则正常操作按钮。

keys：

1. getElementsByName获取多个dom
2. selectedIndex属性，<select>的这个属性可以避免我们需要更复杂的代码进行传值，它告诉了我们第一个select选择了什么
3. selected="selected"定义select标签默认值

转载于:https://my.oschina.net/HeYuhui/blog/632433