Question

如何使用for循环动态地将选项元素添加到select？

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

我尝试过各种形式的innerHTML，但没有运气。

Answer 1

添加选项以从数组中进行选择？

HTML

<select name="select" id="select"></select>

的javascript

var myOptions = ['one','two','three'];
var select = document.getElementById('select');
for (var i = 1; i <= myOptions.length; i++) {
    var option = '<option value="'+ i + '" >' + myOptions[i-1] + '</option>';
    select.insertAdjacentHTML( 'beforeend', option );
}

Answer 2

这应该这样做。您可以修改代码以适应循环并添加动态选项。

＆＃13;

var selectInnerHTML = document.getElementById('dynamic-select').innerHTML;
document.getElementById('dynamic-select').innerHTML = selectInnerHTML + '<option value="4">Four</option>';

＆＃13;

<select id="dynamic-select" class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

＆＃13;

如何动态地向选择中添加html选项元素？

2 个答案: