負載通過一個MySQL表<select>選項，允許用戶通過jQuery

-1

添加到它，我有一個MySQL表看起來像這樣：負載通過一個MySQL表<select>選項，允許用戶通過jQuery

ID OPTION 
1 First 
2 Second

用戶將看到以下內容：

<div id="options"> 
<select> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
</select> 
</div>

我想用戶必須插入到表中的選項，如下所示：

<div id="add"> 
<input type="text" name="newOption" placeholder="Your own option"> 
<input type="button" value="Add"> 
</div>

然後，它將SE LECT其新添加的選項：

<div id="options"> 
<select> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
    <option value="3" selected>Third</option> 
</select> 
</div>

正如上面的代碼是包含其他表單元素的網頁無法重新加載頁面的一部分，否則他們已經輸入的字符將消失數據。所以我想使用jQuery。

編輯：我試過以下，但它增加了兩次行，有時甚至四次，因爲我無法理解的原因！

$("#button").click(function(){ 
var test = $("#<?php echo $selectName; ?>").val(); 
var dataString = 'select=<?php echo $select; ?>&selectName='+ test; 

$.ajax({ 
type: "POST", 
url: "optionAdd.php", 
data: dataString, 
cache: false, 
success: function(html){ 
$("#<?php echo $select; ?>List").load("optionList.php?select=<?php echo $select; if ($_GET[required] == "no") { echo "&required=no"; } ?>"); 
    } 
    }); 
});

的原因PHP上述是我想使用此代碼的倍數相同的形式，因此我使用GET來選擇的選項，因爲它是。

來源

2013-01-05 rybo111

[whathaveyoutried.com]（http://whathaveyoutried.com） - 看看像[jQuery的Ajax]（http://api.jquery.com/jQuery.ajax/）有一個去它和如果您遇到問題，請發佈一些您遇到問題並需要幫助的代碼。問一般問題，即：什麼是最好的方法是廣泛的，並不適合[預期的問答格式] SO – Nope

我嘗試從列表中加載列表另一個PHP文件，當用戶點擊「添加」時，它會提交給另一個PHP文件，然後重新加載列表。但由於某種原因它間歇性地增加了倍數。所以這種方法是不正確的。 – rybo111

你爲什麼沒有發佈你在第一個地方試過的代碼？所有你需要的是從你的代碼中加載（），這本身就是一個阿賈克斯請求 – charlietfl

您需要使用新數據向服務器發送AJAX請求，並獲取爲此新選項返回的ID。一旦ID收到，你可以用新的ID作爲值和用戶定義的文本創建option

$('#add button').click(function(){ 
    /* get value from previous input*/ 
    var newOpt=$(this).prev().val(); 
    /* make AJAX "POST" request*/ 
    $.post('path/to/server/file', { newOption: newOpt}, function(newId){ 
     /* ajax successfully completed, add new option*/ 
     $('#options select').append('<option value="'+ newId +'">'+newOpt+'</option>'); 
    }); 
    return false; /* prevent browser default handling of button click*/ 
})

在服務器接收數據，你會與name="newOption"即$_POST['newOption']和表單域發送回一個新的ID作爲文本

或者，您可以以所需的排序順序將所有選項作爲html發送回來，並替換select中的所有選項。

/* ajax to replace all options with html from server*/ 
    $.post('path/to/server/file', { newOption: newOpt}, function(response){ 
     /* ajax successfully completed, add new option*/ 
     $('#options select').html(response); 
    });

來源

2013-01-06 00:02:19 charlietfl

我明白了！因此，而不是從外部重新加載列表，只需通過jQuery添加到它。有沒有辦法可以重新加載列表？它目前按字母順序列出，你的方法會增加我相信的底部。 – rybo111

我剛剛補充說，如果由於排序順序更容易發回所有選項的HTML。可以使用jQUery進行排序，但爲了避免這種情況，可以簡單地使用 – charlietfl

立即嘗試替代方案。會告訴你這件事的進展的。謝謝！ – rybo111

我會建議使用jQuery AJAX調用PHP腳本來存儲新的選項到數據庫，返回新的ID和成功給定的選項名稱，然後添加使用JavaScript的新條目<select> 。

來源

2013-01-06 00:03:11 Nic

負載通過一個MySQL表<select>選項，允許用戶通過jQuery

回答

相關問題