php - JQuery 下拉菜单与 MySQL

Question

我在链接上有一个 JQuery 脚本，每次用户需要时都会添加额外的输入字段。当代码用于标准下拉框时它工作正常，但我需要下拉列表是从同一个表中提取的相同列表。像这样:

$sql2="SELECT lot, name FROM Products ORDER BY name ASC";
$result2=mysql_query($sql2); 

<select name="test[]" id="test">
<option value=""></option>
<? while($rows2=mysql_fetch_array($result2)) { ?>
<option value="<? echo $rows2['lot']; ?>"><? echo $rows2['name']; ?></option>
<? } ?></select>

这在标准 php 中工作得很好，但是当用户单击引用以下 JQuery 的功能“添加字段”时，我无法弄清楚如何由用户添加它。如何将 php 添加到此 jquery 脚本中以对其进行修改，以便当用户需要另一个下拉框时，会出现相同的下拉框，并从表中自动填充？

头部中的 JQuery:

$(document).ready(function() {

var MaxInputs       = 40; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //how do I add input box here with php code?
        $(InputsWrapper).append('<div><input name="test[]" type="text"     id="test" type="text" class="field text large" value="test'+ FieldCount +'" maxlength="15" onClick="this.select();" /><input name="test2[]" type="text" id="test2" type="text" class="field text" value="test field 2" maxlength="15" /><a href="#" class="removeclass">&times;</a></div>');
        x++; //text box increment
    }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
    }
return false;
}) 

});
</script>

Answer 1

如果你需要相同的下拉框，你可以使用$.clone();

http://api.jquery.com/clone/

这样您就不需要从后端重新填充下拉框，并且可以节省大量时间。

我想出了一个例子来解释如何使用 $.clone - http://jsbin.com/rorowomi/2/

1. 将下拉菜单保留在容器父元素(div 或 section)中。
2. 克隆下拉列表时，您可以克隆特定下拉列表或第一个下拉列表(在我的示例中，我克隆第一个父 div 元素。)然后将其附加到我在步骤 1 中提到的容器父元素。
3. 只需将下拉列表放在父元素中(同样，div 或 section 或任何其他元素)并克隆该父元素。父元素内部还有下拉列表的删除按钮。
4. 对于删除按钮，分配一个 onClick 处理程序，您可以使用 $.parent() 和 $.remove() 来删除父元素，删除下拉菜单。