Php JQuery下拉列表与MySQL

我在一个链接上有一个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中工作得很好，但我不知道如何让用户在单击功能正常的Add字段时添加它，该字段引用以下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>

---

如果需要相同的下拉框，只需使用$.clone

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

我举了一个例子来解释如何使用$.clone-

将下拉列表保存在容器父元素div或section中。 克隆下拉列表时，可以克隆特定的下拉列表，也可以克隆我的示例中的第一个下拉列表I克隆第一个父div元素。然后将其附加到我在步骤1中提到的容器父元素。 只需再次将下拉列表放在父元素、div或section或任何内容中，然后克隆该父元素。父元素中还有下拉列表的删除按钮。 对于delete按钮，分配一个onClick处理程序，可以使用$.parent和$.remove来删除父元素，删除下拉列表。

---

我会依赖ajax，下面是如何使用它的

首先在add字段中设置一个click事件来动态添加输入字段，这里我将显示一个select框。这将访问一个名为ajax.php的文件来生成输入

$("#addfield").on("click", function(e) {
    e.preventDefault();

    $.post("ajax.php", function(data) {
        $("#InputsWrapper").append(data.content);
    }, "json");
});

然后，我们的ajax.php构建返回表单的输入

<?php

    $html[] = '<select name="test[]" class="remove">';
    $html[] = '<option value=""></option>';

    while($rows2=mysql_fetch_array($result2)) {
        $html[] = '<option value="'.$rows2['lot'].'">'.$rows2['name'].'</option>';
    } 

    $html[] = '</select>';

    $response["content"] = implode("\n", $html);
    echo json_encode($response);
?>

如果您想限制输入的数量，我将在ajax.PHP中使用PHP会话

---

跟踪输入的数量。创建时将1添加到会话中，删除时将-1添加到会话中。只要我的2美分

谢谢你的帮助。我不太熟悉AJAX，但我正在尝试您的代码。我是否使用相同的href=id=addfield调用脚本？我正在尝试，但它不起作用-这可能就是原因。这是一个简单的解决办法！是否有任何简单的方法可以像原始脚本那样删除克隆？如果要删除相同的下拉列表，我建议您克隆包含下拉列表和删除按钮的父元素，而不是克隆下拉列表。当您在下拉列表中分配$.click处理程序时，您可以使用$.parent引用父级并调用.remove。请看完美谢谢！我唯一需要解决的问题是，按钮提交表单，但其他克隆/删除操作运行正常；

$(document).on("click", ".remove", function(e) {
    e.preventDefault();

    $(this).remove();
});