单击选项后如何添加新的选择菜单

Question

我正在尝试复制此页面

https://arrayexplorer.netlify.com/

最好的方法是什么？由于重复了一次，我不想手动地每个人

我的第一种方法是获取值字符串，并在值名称上有一个数组并循环遍历，但是该函数将值作为字符串而不是变量作为字符串，然后尝试了switch语句，这将是很long。

    var addItems = ['elements to an array', 'elements at the end'];
    var test = ['test', 'hhh'];
    var secondOption = document.getElementById('secondOption'); 
       //secondselect 
     menu
    var arrOptions = document.querySelector('.arrOptions'); //select menu

     arrOptions.addEventListener('change', (e) => {
        var arrValue = e.target.value;

            switch (arrValue) {
             case 'addItems':
               secondOption.innerHTML = '';
                 runValues(addItems);
                  break;

             case 'other':
                secondOption.innerHTML = '';
                   runValues(test);
                 break;
           }
          });


       function runValues(arr) {
          console.log(typeof arr);

          for (var i = 0; i < arr.length; i++) {
             secondOption.innerHTML += '<option>' + arr[i] + '</option>';
          }
       }


    //html

   <select class="arrOptions"> 
       <option value="addItems">Add Items to an Array</option> 
       <option value="removeItem">Remove Items</option>
       <option value="findItems">Find Items</option>
       <option value="walkOver">Walk Over Items</option>
       <option value="returnString">Return a String</option>
       <option value="orderArray">Walk Over Items</option>|
       <option value="other">Other</option>
  </select>

Answer 1

这并不完美，但这是如何动态更改<select>元素中的选项的一个示例。 更新了codepen示例。

HTML：

<html>
  <button id='button' onClick='handleClick()'>Change Array</button>
  <input type='number' id='number' value='0' onChange='handleChange()'/>
  <select id='select'>
  </select>
</html>

JavaScript的：

const lists = [
  {
    one: { value: 1 },
    two: { value: 2 },
    three: { value: 3}
  },
  {
    four: { value: 4 },
    five: { value: 5 },
    six: { value: 6}
  },
  {
    seven: { value: 7 },
    eight: { value: 8 },
    nine: { value: 9 }
  }
]

const inputNumber = document.getElementById('number')
const select = document.getElementById('select')

function handleClick() {
  inputNumber.value = parseInt(inputNumber.value) + 1
  handleChange()
}

function handleChange() {
  select.innerHTML = '' // Removes previous list options on update
  const currentNumber = parseInt(inputNumber.value)
  const currentList = lists[currentNumber - 1]
  const keys = Object.keys(currentList)
  keys.map((key, index) => {
    const newOption = document.createElement('option')
    newOption.value = currentList[key].value
    newOption.innerHTML = key
    select.appendChild(newOption)
  })
}

Answer 2

There are two function one for which option is selected and according 
selected value switch call second function named runValues(array) with 
parameter as array and set option in second select box. 
copy script and html code and paste in your code necessary place and check 
and verify.

<script>
var addItems = ['elements to an array', 'elements at the end'];
var test = ['test', 'hhh'];
var arrFindItems = ['milk', 'eggs', 'sugar', 'keys'];

    function event_function()
    {
        var select_one = document.getElementById("select_one");
        var selected_option = select_one.options[select_one.selectedIndex];

        switch(selected_option.value)
        {
            case "addItems" :
                runValues(addItems);
                break;

            case "removeItem" :
                runValues(test);
                break;

            case "findItems" :
                runValues(arrFindItems);
                break;

        }
    }


    function runValues(arr)
    {
        var secondOption = document.getElementById('second_select');
        secondOption.innerHTML = "";

        alert("First Element of Array : " + arr[0]);

        for (var i = 0; i < arr.length; i++)
        {
            secondOption.innerHTML += '<option>' + arr[i] + '</option>';
        }
    }

//Html File

<html>
<body>

I Have An Array :
<select class="arrOptions" id="select_one" onchange="event_function()">
    <option value="addItems">Add Items to an Array</option>
    <option value="removeItem">Remove Items</option>
    <option value="findItems">Find Items</option>
    <option value="walkOver">Walk Over Items</option>
    <option value="returnString">Return a String</option>
    <option value="orderArray">Walk Over Items</option>|
    <option value="other">Other</option>
</select>

I m interested in :
<select id="second_select">

</select>
</body>
</html>

单击选项后如何添加新的选择菜单

问题描述

2 个解决方案

解决方案1
1 2019-07-24 13:18:47

解决方案2
0 2019-07-24 18:35:00

单击选项后如何添加新的选择菜单

问题描述

2 个解决方案

解决方案1 1 2019-07-24 13:18:47

解决方案2 0 2019-07-24 18:35:00

解决方案1
1 2019-07-24 13:18:47

解决方案2
0 2019-07-24 18:35:00