<option>追加jquery无法正常工作

Question

我在jQuery中附加标记时遇到问题。 jQuery代码是：

var newTextBoxDiv = $(document.createElement('div'))
   .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<select>');

$.each(companies, function(key, value){
    newTextBoxDiv.append('<option value = '+value+'>');
    newTextBoxDiv.append(value);
    newTextBoxDiv.append('</option>');
});

newTextBoxDiv.append('</select> </div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");

但是，它显示所有选项都没有实际附加。我得到的输出是：

Answer 1

这是使用jQuery创建动态元素的正确方法

＆＃13;

＆＃13;

var counter = 0;
var companies = [
  "companyA",
  "companyB",
  "companyC"
];

function selectBox(arr) {
  var select = "<select>";
  $.each(arr, function(key, value) {
    select += "<option value='" + value + "'>" + value + "</option>";
  });
  select += "</select>";
  return select;
}

function newTetBoxDiv() {
  return $("<div/>", {
    id: 'TextBoxDiv' + (counter++), // assign as ID and increment counter
    append: selectBox(companies),
    appendTo: "#TextBoxesGroup"
  });
}

// TEST:
$("#create").on("click", newTetBoxDiv);

＆＃13;

#TextBoxesGroup {
  border: 1px solid red;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="TextBoxesGroup"></div>

<button id="create">CREATE TextBoxDiv</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

newTextBoxDiv.after().html('<select>');

应该是：

newTextBoxDiv.html('<select>');

Answer 3

after()函数转到选择器的下一个元素，当你使用html后，下一个元素html改变。因此，如果您需要将select元素附加到#TextBoxesGroup，则可以构建元素的html字符串，最后使用appendTo函数附加到#TextBoxesGroup元素。

您可以使用：

newTextBoxDiv = '';
newTextBoxDiv += '<select>';

$.each(companies, function(key, value){
    newTextBoxDiv += ('<option value = '+value+'>');
    newTextBoxDiv += value;
    newTextBoxDiv += '</option>';
});

newTextBoxDiv += '</select> </div></div>';
$(newTextBoxDiv).appendTo("#TextBoxesGroup");