<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"); 

但是，它显示像所有的选项是不实际appended.The输出我得到的是：

Answer 1

下面是用来创建动态元素的jQuery

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);

#TextBoxesGroup { 
 
    border: 1px solid red; 
 
}

<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>

Answer 2

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

应该是：

newTextBoxDiv.html('<select>'); 

Answer 3

after()功能去选择器的下一个元素，并且当您使用后的HTML，下一个元素HTML更改。因此，如果您需要将选择元素附加到#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");