【问题标题】:Javascript for loop to add "n" number of option elments?Javascript for循环添加“n”个选项元素?
【发布时间】:2012-10-02 10:27:23
【问题描述】:

我有一个动态生成的数字,我想将此数量的选项元素添加到选择中。我认为 for 循环将是执行此操作的最佳方法。假设我的包含数字的变量是 var number。感谢您的帮助。

我的起始 HTML 是:

<select id="test">

</select>

使用 Javascript,我需要这样的东西:

function selectOne() {
  var select = document.getElementById('test');
 // for loop goes here?
 //   e.select[0] = new Option(number);  // do this n times with value also equaling number

}

所以如果数字 = 6,我生成的 HTML 需要如下所示:

<select id="test">  
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

【问题讨论】:

    标签: javascript loops select option


    【解决方案1】:

    这构建了 n 个选项:

    function selectOne() {
      var select = document.getElementById('test');
      for (var i=0; i<n; i++) {
         select.options[select.options.length] = new Option(i+1, i);
      } 
    }
    

    Demonstration

    【讨论】:

      【解决方案2】:

      这应该会创建您的选项。并且向后兼容许多支持 javascript 的浏览器

      function selectOne() {
          for (var selectEle = document.getElementById("test"), i = 1, o; i <= 6;  i += 1) {
              o = document.createElement("option");
              o.value = i;
              o.appendChild(document.createTextNode(i));
              selectEle.appendChild(o);
      
              /*
              // As pointed out in the comments it can be done as such:
              o = document.createElement("option");
              o.value = o.text = i;
              selectEle.appendChild(o);
              */
          }
      }
      

      【讨论】:

      • 你实际上可以跳过appendChildcreateTextNode,只使用.text属性,所以o.value = o.text = i;但是+1因为我认为这可能比Option有更好的兼容性构造函数。
      • .text 据我所知不是标准。因此,为了尽可能保持兼容,我选择只创建上面的元素
      • 是的,它是 DOM 1 级标准。 :) w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-70901257
      • 哦,好吧,如果没有别的,至少有一个如何创建其他节点等的示例:d
      • 当然,完全有效的解决方案,并且在其他地方有用。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-03-20
      • 2018-01-27
      • 1970-01-01
      • 2022-07-29
      相关资源
      最近更新 更多