javascript - 使用 jQuery，查找所有选择并将索引值附加为选项

Question

我正在尝试查找<select>页面上的所有元素，获取索引，然后将每个索引作为值附加到所有 select's<option>中。在这里，我有每个选择：

<select class="select"></select>
<select class="select"></select>
<select class="select"></select>
<select class="select"></select>

var i = 0;
  $(".select").each(function(){
    ++i;
  });
  $(".select").each(function(){
    for (i > 0){
      $(this).append("<option val='" + i + "'>" + i + "</option>");
    }
});

最后，我试图实现的目标将使每个选择看起来像：

<select>
  <option val="1">1</option>
  <option val="2">2</option>
  <option val="3">3</option>
  <option val="4">4</option>
  <option val="5">5</option>
  <option val="6">6</option>
  <option val="7">7</option>
  <option val="8">8</option>
  <option val="9">9</option>
  <option val="10">10</option>
</select>

看来我快到了……

Answer 1

var $selects = $("select");
var selCount = $selects.length;

for(var i=1; i<=selCount; i++){
    $selects.append("<option value='" + i + "'>" + i + "</option>");
}

http://jsfiddle.net/Wy643/

Answer 2

如果每个选择都应该获得与总选择一样多的选项，那么 yuo 可以这样做：

var sel = $("select")
sel.map(function(i, s) {
     return $("<option>", {text: i, value: i})[0];
}).appendTo(sel);

演示：http: //jsfiddle.net/vmUpN/

---

如果您有兴趣，这是一个简单的 JS 版本。

var sel = document.getElementsByTagName("select");
var opts = document.createDocumentFragment();

for (var i = 0; i < sel.length; i++) {
    opts.appendChild(new Option(i, i));
}
for (var i = 0; i < sel.length; i++) {
    sel[i].appendChild(opts.cloneNode(true));
}

演示：http: //jsfiddle.net/vmUpN/1/