Question

我的页面有2-300个选择下拉框。我需要动态更新每个选项以获得相同的选项列表。每次我尝试更新它时，它只会执行第一次。我怀疑问题是它没有循环通过它。

// HTML

<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>

// JavaScript

    var myArray = new Array("1", "2", "3", "4", "5");


    // Get dropdown element from DOM
    var dropdown = document.getElementById("selectNumber");

    // Loop through the array
    for (var i = 0; i < myArray.length; ++i) {
        // Append the element to the end of Array list
        dropdown[dropdown.length] = new Option(myArray[i], myArray[i]);
      }

http://jsfiddle.net/p6eqrxn8/1/

Answer 1

正如迈克所说，你不能为你的所有选择使用相同的ID字段。

＆＃34; ID在页面中应该是唯一的。但是，如果存在多个具有指定ID的元素，则getElementById（）方法将返回源代码中的第一个元素。＆＃34;

您可以尝试将相同的类设置为您的选择，然后使用getElementsByClassName（class），它返回该类的所有元素。

此外，如果您想要更改的页面中没有其他选择元素，则可以使用getElementsByTagName（＆＃39; select＆＃39;）返回所有选择元素。

Answer 2

您可以使用getElementsByTagName作为表单ID并将其保存到某个变量

，如下面的代码，然后将该变量与dropdown

一起使用

获取表单的所有window.onload = function() { var myFormdropdown = document.getElementById("myForm"); var varselect = myFormdropdown.getElementsByTagName("select"); var myArray = new Array("1", "2", "3", "4", "5"); // Loop through the array for (var j = 0; j < varselect.length; j++) { for (var i = 0; i < myArray.length; ++i) { // Append the element to the end of Array list var option = document.createElement('option'); option.value = myArray[i]; option.innerHTML = myArray[i]; varselect[j].options.add(option); } } };。

我修改了你的html，见下文并使用这个脚本

<form id="myForm">
  <select id="selectNumber">
    <option>Choose a number</option>
  </select>
  <select id="selectNumber">
    <option>Choose a number</option>
  </select>
  <select id="selectNumber">
    <option>Choose a number</option>
  </select>
</form>

controller

希望这会对你有所帮助。

动态更新多个选择框

2 个答案: