js realizes simple two level linkage effect

2021-08-03 08:17:39
OfStack
Without saying much, please look at the code:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script>
  window.onload = function () {
    //  Create two drop-down lists 
    var sel1 = document.createElement("select");
    var sel2 = document.createElement("select");
    //  Add to body Medium 
    document.body.appendChild(sel1);
    document.body.appendChild(sel2);
    var arr = [" Not selected "," Master ", " Shooter ", " Auxiliary ", " Play wild "];
    var arr1 = [" Card ", " Fish Man ", " Victor ", " Lachs "];
    var arr2 = [" Cold ice ", " Dreven ", " Wayne ", " Verus "];
    var arr3 = [" Brits ", " Nami ", " Bloom ", " Hammer stone "];
    var arr4 = [" Baylor ", " Mantis ", " Man Zi ", " Blade Master "];

    function addChild(abj, arr) {
      for (var i = 0; i < arr.length; i++) {
        //  Loop creation opt Element 
        var opt = document.createElement("option");
        //  Settings option Element, which is the passed-in array content 
        opt.innerText = arr[i];
        //  Put option Add to select Medium 
        abj.appendChild(opt);
      }
    }
    //  Give the first 1 Add data to a drop-down list 
    addChild(sel1, arr);
    //  Give the first 1 Method for adding change value to drop-down list 
    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;
      }
    };
    // Delete function 
    function remoOpt() {
      for(var i = sel2.children.length-1;i>=0;i--){
        sel2.children[i].remove();
      }
    }
  }
</script>
</body>
</html>