jquery - Jquery在for循环中创建选项元素？

Question

我的select下拉菜单最初是php这样创建的：

  <select id="cupcake-amt" name="amt">
         <?php for($i=0; $i<50; $i++) : ?>
          <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
          <?php endfor; ?>
  </select>

我将如何创建一个将选项重建为不同数量的 jquery 函数。所以不是 50 个选项，我会在 12 个之后想要它。最好的方法是什么？

Answer 1

如果你想在 jQuery 中重建你的选项最多 12 个项目，你可以这样做

<script type="text/javascript">
   $(function(){
      var options="";
      var numberOfItemsNeeded=12;
      for(var i=1;i<=numberOfItemsNeeded;i++)
      {
         options+="<option value='"+i+"'>"+i+"</option>";
      }       
      $("#cupcake-amt").html(options);        
   });
</script>

工作样本：http: //jsfiddle.net/yDh6x/3/

Answer 2

您可以只清空 select.. 然后使用变量来存储选项元素并将其附加到末尾。

$('#cupcake-amt').empty(); // <-- empty the select box - so it removes the 50
var x = '';  // <-- variable to store option string
for(i=0;i<theLengthYouWant;i++){  
   x += '<option value="' + i + '">' + i + '</option>';  // <-- store how many options
}
$('#cupcake-amt').append(x);  // <-- append to the select

http://jsfiddle.net/wirey00/BSmKt/

Answer 3

您可以创建 JS 函数：

function generator(number, selectId) {
   var options = '';
   for (var i = 0; i < number; i++) {
     options += "<option value="+i+'>'+i+'</option>'
   }
   $('#'+selectId).html(options)
}

然后调用该函数，其中10是应生成的选项数，selectId是目标选择元素的 ID。

generator(10, 'target')

演示