Question

我想在jquery .after（）函数中使用for循环添加<option>标记。我有以下代码：

$("#myid").after("<!--more tags here-->"+
                  "<select class='form-control' name='dropdownmenu'>"+
                  "for (i=0; i < 4 ; i++){"+
                  "<option>i</option>}"+
                  "</select>"+
                  "<!--more tags here-->")

但那不起作用，我得到的只是1 <option>标签，里面有字母

Answer 1

你不能像那样循环js。你可以像以下一样。您可以先创建选择块，然后附加它。代码没有经过测试，希望你能得到这个想法。

var test = "<select class='form-control' name='dropdownmenu'>";

for (i=0; i < 4 ; i++){
    test += "<option>"+i+"</option>}";                  
}
test += "</select>";

$("#myid").after(test);  // note: use . for class or # for id

您仍然可以通过这种方式添加更多标签：

$("#myid").after("<span>start</span>"+test+"<span>end</span>");

Answer 2

@techLove答案有效。

但如果你绝对必须，你可以使用.map()：

$("#myid").after("<!--more tags here-->"+
                  "<select class='form-control' name='dropdownmenu'>"+
                  [0, 1, 2, 3].map(i => "<option>"+i+"</option>") +
                  "</select>"+
                  "<!--more tags here-->")

Answer 3

我知道这个问题已经有了答案，但是，多亏了它，我已经学会了新的东西，我想分享这些知识。

这样做，是，恕我直言，更清洁，更优雅。

＆＃13;

var options = [0, 1, 2, 3];

$(function() {
  var $select = $('<select>', {
    class: 'form-control',
    name: 'dropdownmenu',
    html: options.map(function(option) {
      return $('<option>', {
        value: option,
        text: option
      })
    })
  }).appendTo('.wrapper');
  
  //if you really want to use after, remove "appendTo" and use this
  //$('.wrapper').after($select);
});

＆＃13;

.wrapper {
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>

＆＃13;

在jquery .after（）函数中添加for循环

3 个答案: