第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

單擊選項(xiàng)后如何添加新的選擇菜單

單擊選項(xiàng)后如何添加新的選擇菜單

繁華開滿天機(jī) 2021-08-20 16:18:19
我正在嘗試復(fù)制此頁面https://arrayexplorer.netlify.com/最好的方法是什么？ 因?yàn)檫@是重復(fù)的，我不想每個(gè)人都手動(dòng)出來我的第一種方法是獲取值字符串，并在值名稱上設(shè)置一個(gè)數(shù)組并循環(huán)遍歷，但是該函數(shù)將值作為字符串而不是變量，然后我嘗試了一個(gè) switch 語句，這將是長(zhǎng)篇大論。    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>
查看完整描述

2 回答

?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

這并不完美，但它是如何動(dòng)態(tài)更改<select>元素中的選項(xiàng)的示例。更新了 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)

  })

}


查看完整回答
反對(duì) 回復(fù) 2021-08-20
?
侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

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>


查看完整回答
反對(duì) 回復(fù) 2021-08-20
  • 2 回答
  • 0 關(guān)注
  • 214 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)