How to add a new Select Menu after clicking an option

Question

Im trying replicate this page

https://arrayexplorer.netlify.com/

What would be the best approach?As this is repeated i don't want to each one out manually

My first approach was to get the value string, and have an array on the value name and loop through, however the function took the value as a string instead of a variable, i;ve then tried a switch statement, which is going to be very long winded.

    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

This isn't perfect, but it's an example of how you can dynamically change the options in a <select> element. Updated codepen example .

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>

How to add a new Select Menu after clicking an option

Question

2 answers

solution1
1 2019-07-24 13:18:47

solution2
0 2019-07-24 18:35:00

How to add a new Select Menu after clicking an option

Question

2 answers

solution1 1 2019-07-24 13:18:47

solution2 0 2019-07-24 18:35:00

solution1
1 2019-07-24 13:18:47

solution2
0 2019-07-24 18:35:00