使用从 php 获取的数据动态添加相等的选择表单字段

Question

我有一个表单，其中包含动态生成的选择字段以及从 php 中获取的选项（所有选择都相同）。但我需要每个<select>...</select> 必须显示在不同的行中。这可以通过将每个 <select>...</select> 包含在 <div>...</div> 中来完成。

这是我拥有的代码，它可以工作，但选择字段不在 div 中：

<script type="text/javascript">
//<![CDATA[ 
$(function(){
var counter = 1;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}   

var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});

$.ajax({
url: 'selects.php',
dataType: "html",
success: function(data) {
select.html(data);
}
});        

select.appendTo("#TextBoxesGroup");
counter++;
});

$("#removeButton").click(function () {
if(counter==1){
   alert("No more textbox to remove");
   return false;
}   

counter--;
$("#select" + counter).remove();

});

$("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
   alert(msg);
});
});
//]]> 
</script>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
<div id="TextBoxDiv2">
    <label>Textbox #2 : </label><input type='text' id='textbox2' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

这是select.php生成的html代码：

<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>

Answer 1

使用the wrap() function。 ：

将此代码放在counter++; 之前。 ：

$("#TextBoxesGroup > select").wrap ( function () {
    return '<div id="wrap_' + this.id + '"></div>';
} );

See it in action at jsFiddle.