js實現(xiàn)簡單的二級聯(lián)動效果

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

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

話不多說，請看代碼：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script>
  window.onload = function () {
    // 創(chuàng)建兩個下拉列表
    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");
        // 設置option元素的內容，內容為傳入的數(shù)組內容
        opt.innerText = arr[i];
        // 把option添加到select中
        abj.appendChild(opt);
      }
    }
    // 給第一個下拉列表添加數(shù)據(jù)
    addChild(sel1, arr);
    // 給第一個下拉列表添加改變值得方法
    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>

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

uniapp如何手動實現(xiàn)讓input文本框聚焦效果
最近使用uniapp做一個評論的功能,遇到一個需求就是點擊上面的評論圖標,讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關于uniapp如何手動實現(xiàn)讓input文本框聚焦效果的相關資料,需要的朋友可以參考下
2023-12-12
小程序實現(xiàn)日歷左右滑動效果
這篇文章主要為大家詳細介紹了小程序實現(xiàn)日歷左右滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
Javascript 類型轉換方法
Javascript (ECMA Script)是一種弱類型的語言。這并不意味著它沒有數(shù)據(jù)類型，只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值。
2010-10-10
js中通過父級進行查找定位元素
這篇文章主要介紹了js中如何通過父級進行查找定位元素,需要的朋友可以參考下
2014-06-06
JavaScript Perfection kill 測試及答案
近日，在Perfection kill上看到有關javascript quiz。并做了一下，最終錯了2個（#2，#9），但是，這2道題，在Ie和ff下的答案是不一樣的？！
2010-03-03
js+css實現(xiàn)文字散開重組動畫特效代碼分享
這篇文章主要介紹了js+css實現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下
2015-08-08
微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
JS實現(xiàn)單行文字不間斷向上滾動的方法
這篇文章主要介紹了JS實現(xiàn)單行文字不間斷向上滾動的方法,以實例形式較為詳細的分析了文字滾動效果實現(xiàn)的原理與技巧,需要的朋友可以參考下
2015-01-01
微信上傳視頻文件提示（推薦）
晚上要下班了老板發(fā)來一個任務：把一個300M左右的視頻壓縮到100M以內,以便在微信上發(fā)送。于是就是抽空搞了起來，下面小編把過程分享到腳本之家平臺，需要的朋友參考下吧
2018-11-11
JS+CSS3制作炫酷的彈窗效果
本文給大家分享使用js和css3制作的炫酷彈窗效果，整個背景模糊，要比純色加透明度高大上好多。對js彈窗效果感興趣的朋友一起學習吧
2016-11-11