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

Question

我正在尝试在我的页面上找到所有<select>元素，获取索引，然后将每个索引作为值附加到所有选择的<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

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

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/