简单H5前端下拉菜单select之二级联动

发布于 2019-12-31 14:10:51

select二级联动
HTML:
一级下拉菜单
<select id="first" οnchange="setSecond(this.value)">

    <option value="1">广西</option>
    <option value="2">广东</option>

</select>

二级下拉菜单
<select id="second">
</select>

JS:
function setSecond(value){

  var val = value;
  if(val == 1){
    var sec = document.getElementById('second');
    sec.options.length=0; //清空二级菜单项
    sec.options[0] = new Option("南宁","nanning");
    sec.options[1] = new Option("梧州","wuzhou");
    sec.options[2] = new Option("柳州","liuzhou");
  }else {
    var sec = document.getElementById('second');
    sec.options.length=0; //清空二级菜单项
    sec.options[0] = new Option("广州","guangzhou");
    sec.options[1] = new Option("深圳","shenzhen");
    sec.options[2] = new Option("中山","zhongshan");
  }
}

————————————————
版权声明:本文为CSDN博主「Link丶林」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_37254866/article/details/86678590

0 条评论

发布
问题

官网
微信

官方微信