Question

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

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

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

DEMO： 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));
}

DEMO： http://jsfiddle.net/vmUpN/1/

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

2 个答案: