猿问

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

我正在尝试复制此页面


https://arrayexplorer.netlify.com/


最好的方法是什么？ 因为这是重复的，我不想每个人都手动出来


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


    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>


繁华开满天机
浏览 198回答 2
2回答

GCT1015

这并不完美，但它是如何动态更改<select>元素中的选项的示例。更新了 codepen 示例。HTML：<html>&nbsp; <button id='button' onClick='handleClick()'>Change Array</button>&nbsp; <input type='number' id='number' value='0' onChange='handleChange()'/>&nbsp; <select id='select'>&nbsp; </select></html>JavaScript：const lists = [&nbsp; {&nbsp; &nbsp; one: { value: 1 },&nbsp; &nbsp; two: { value: 2 },&nbsp; &nbsp; three: { value: 3}&nbsp; },&nbsp; {&nbsp; &nbsp; four: { value: 4 },&nbsp; &nbsp; five: { value: 5 },&nbsp; &nbsp; six: { value: 6}&nbsp; },&nbsp; {&nbsp; &nbsp; seven: { value: 7 },&nbsp; &nbsp; eight: { value: 8 },&nbsp; &nbsp; nine: { value: 9 }&nbsp; }]const inputNumber = document.getElementById('number')const select = document.getElementById('select')function handleClick() {&nbsp; inputNumber.value = parseInt(inputNumber.value) + 1&nbsp; handleChange()}function handleChange() {&nbsp; select.innerHTML = '' // Removes previous list options on update&nbsp; const currentNumber = parseInt(inputNumber.value)&nbsp; const currentList = lists[currentNumber - 1]&nbsp; const keys = Object.keys(currentList)&nbsp; keys.map((key, index) => {&nbsp; &nbsp; const newOption = document.createElement('option')&nbsp; &nbsp; newOption.value = currentList[key].value&nbsp; &nbsp; newOption.innerHTML = key&nbsp; &nbsp; select.appendChild(newOption)&nbsp; })}
0

侃侃无极

There are two function one for which option is selected and according&nbsp;selected value switch call second function named runValues(array) with&nbsp;parameter as array and set option in second select box.&nbsp;copy script and html code and paste in your code necessary place and check&nbsp;and verify.<script>var addItems = ['elements to an array', 'elements at the end'];var test = ['test', 'hhh'];var arrFindItems = ['milk', 'eggs', 'sugar', 'keys'];&nbsp; &nbsp; function event_function()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var select_one = document.getElementById("select_one");&nbsp; &nbsp; &nbsp; &nbsp; var selected_option = select_one.options[select_one.selectedIndex];&nbsp; &nbsp; &nbsp; &nbsp; switch(selected_option.value)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "addItems" :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; runValues(addItems);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "removeItem" :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; runValues(test);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "findItems" :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; runValues(arrFindItems);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function runValues(arr)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var secondOption = document.getElementById('second_select');&nbsp; &nbsp; &nbsp; &nbsp; secondOption.innerHTML = "";&nbsp; &nbsp; &nbsp; &nbsp; alert("First Element of Array : " + arr[0]);&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < arr.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secondOption.innerHTML += '<option>' + arr[i] + '</option>';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }//Html File<html><body>I Have An Array :<select class="arrOptions" id="select_one" onchange="event_function()">&nbsp; &nbsp; <option value="addItems">Add Items to an Array</option>&nbsp; &nbsp; <option value="removeItem">Remove Items</option>&nbsp; &nbsp; <option value="findItems">Find Items</option>&nbsp; &nbsp; <option value="walkOver">Walk Over Items</option>&nbsp; &nbsp; <option value="returnString">Return a String</option>&nbsp; &nbsp; <option value="orderArray">Walk Over Items</option>|&nbsp; &nbsp; <option value="other">Other</option></select>I m interested in :<select id="second_select"></select></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答