select标签实现二级联动

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

select标签实现二级联动

效果如下图所示：

 实现的原理：使用onchange事件，原理见代码

html代码：

?

1 2 3 4 5 6

< select id="select" class="sel">          < option value="weiguo">魏国</ option >          < option value="shuguo">蜀国</ option >          < option value="wuguo">吴国</ option >      </ select > < select id="val" class="sel"></ select >

 script代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

< script type="text/javascript">          var select = document.getElementById("select");          select.onchange=function(){              var selvalue = select.value;              var val = document.getElementById("val");              switch(selvalue){                  case "weiguo" : val.innerHTML="< option >荀彧</ option >< option >曹操</ option >";break;                  case "shuguo" : val.innerHTML="< option >刘备</ option >< option >诸葛亮</ option >";break;                  case "wuguo" : val.innerHTML="< option >孙权</ option >< option >周瑜</ option >";break;                  default : alert("erro");              }          }; </ script >

转载于:https://my.oschina.net/demons99/blog/2254342