與MySQL的JQuery下拉列表

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元素。）然後它appeend與我在步驟提到的容器父元素1.
3. 只需將下拉列表放在父元素中（再次，div或section，或其他任何東西）並克隆該父元素。在父元素內部也是下拉菜單的刪除按鈕。
4. 對於刪除按鈕，分配一個onClick處理程序，您可以使用$.parent()和$.remove()這將刪除父元素，刪除下拉列表。

Answer 2

我會依靠ajax，這裏是如何。

首先設置點擊事件添加字段來動態添加輸入字段，在這裏我會顯示一個選擇框。這達到了一個叫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); 
?> 

這則追加到窗體從click事件

要刪除輸入，我們使用我們應用於輸入的.remove類ajax.php

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

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

如果要限制輸入的數量，我將使用ajax.php 中的PHP會話來跟蹤輸入的數量。創建時向會話添加1，在刪除時添加-1。只是我2美分。