快捷導(dǎo)航

js實(shí)現(xiàn)簡單的二級聯(lián)動(dòng)效果

更新時(shí)間：2017年03月09日 09:50:59 作者：987623616

本文主要介紹了js實(shí)現(xiàn)簡單的二級聯(lián)動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

話不多說，請看代碼：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script>
  window.onload = function () {
    // 創(chuàng)建兩個(gè)下拉列表
    var sel1 = document.createElement("select");
    var sel2 = document.createElement("select");
    // 添加到body中
    document.body.appendChild(sel1);
    document.body.appendChild(sel2);
    var arr = ["未選擇","法師", "射手", "輔助", "打野"];
    var arr1 = ["卡牌", "魚人", "維克托", "拉克絲"];
    var arr2 = ["寒冰", "德萊文", "維恩", "維魯斯"];
    var arr3 = ["布里茨", "娜美", "布隆", "錘石"];
    var arr4 = ["貝爺", "螳螂", "蠻子", "劍圣"];

    function addChild(abj, arr) {
      for (var i = 0; i < arr.length; i++) {
        // 循環(huán)創(chuàng)建opt元素
        var opt = document.createElement("option");
        // 設(shè)置option元素的內(nèi)容，內(nèi)容為傳入的數(shù)組內(nèi)容
        opt.innerText = arr[i];
        // 把option添加到select中
        abj.appendChild(opt);
      }
    }
    // 給第一個(gè)下拉列表添加數(shù)據(jù)
    addChild(sel1, arr);
    // 給第一個(gè)下拉列表添加改變值得方法
    sel1.onchange = function () {
      remoOpt();
//      console.log(sel1.selectedIndex)
      switch (sel1.selectedIndex){
        case 1:
          addChild(sel2,arr1);
          break;
        case 2:
          addChild(sel2,arr2);
          break;
        case 3:
          addChild(sel2,arr3);
          break;
        case 4:
          addChild(sel2,arr4);
          break;
      }
    };
    //刪除函數(shù)
    function remoOpt() {
      for(var i = sel2.children.length-1;i>=0;i--){
        sel2.children[i].remove();
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: