使用取自php的数据动态添加相等的select表单字段

使用取自php的数据动态添加相等的select表单字段,php,jquery,forms,select,Php,Jquery,Forms,Select,我有一个表单,其中动态生成了select字段,所有select的选项都来自php。但我需要每一个。。。必须以不同的行显示。这可以做到每一个。。。在 这是我的代码,它正在工作,但select字段不在div中: <script type="text/javascript"> //<![CDATA[ $(function(){ var counter = 1; $("#addButton").click(function () { if(counter>10){

我有一个表单,其中动态生成了select字段,所有select的选项都来自php。但我需要每一个。。。必须以不同的行显示。这可以做到每一个。。。在

这是我的代码,它正在工作,但select字段不在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>
用途:

将此代码放在计数器++;)前面:


它工作不好。我知道每个。。。一定是在…里面。。。。我使用的代码是:select.appendToTextBoxesGroup$TextBoxesGroup select.wrap函数{return;};就在计数器前面++;它可以工作,但它会在以前的选择中添加越来越多的div,因此选择不会很好地对齐到左侧,并且每行中没有一个选择。请参阅更新的答案。还要记住,没有两个元素可以拥有相同的id,而不会发生不好的事情。太棒了!它现在正在工作。非常感谢。但在需要时:select.appendToTextBoxesGroup;就在你发布代码之前。请更新它,让它适合每个人。太好了!求你了,朱尔斯最后一件事。“删除”按钮工作不正常。如果单击“删除”,则“选择”将消失,但如果单击“添加”,则新的“选择”将显示在删除的选择下方,而不仅仅显示在删除的选择的位置。我已尝试使用$select+counter.remove;和$wrap+counter.remove;同样的道理。amparo69,你应该将编辑的内容回滚到原版的问题是如何提出和回答的。这大概是第5版。过分改变问题的性质是不可取的。改为问一个新问题。我已经为你把这个问题退回去了。接下来我来看看新问题。
$("#TextBoxesGroup > select").wrap ( function () {
    return '<div id="wrap_' + this.id + '"></div>';
} );