Jquery使用submit to select list從輸入中添加帶有值的選項

Question

我有這個HTML代碼

    <h3></h3><br></div>
<div style="border-left: solid #0a0a0a 1px; float:left; height: 80%; margin-top:7%; width: 10px;" ></div>
<div style="width: 49%; float: right;">
    <h3></h3><br>
    <input name="jurors" id="jurors" type="text" style="width: 80%;">
    <br>
    <input type="button" value="Add" class="addButton">
    <br>
    <br>
    <br>
    <br>
    <select style="width:80%;height:250px; bottom: 0;" rows="10" multiple="multiple"></select>

我對此做的是通過單擊“添加”按鈕從輸入字段中獲取值並將其添加到選擇框中。 此外，如果可以通過單擊從selct框中刪除值。 我需要將選擇框值作為一個列表，以便稍后插入到我的數據庫中。 我認為這可以通過jQuery（添加和刪除值）完成，但我對語言的了解太基礎了。

提前謝謝你的幫助。

Answer 1

我想出了一個Javascript / JQuery解決方案。 讓我們通過它讓你知道發生了什么，如果你需要改變它，你可以。 我離開你的HTML幾乎一樣（為了開發我已經拿走了一些樣式），無論如何它在這里：

    <h3>Adding and removing options</h3>
<input name="jurors" id="jurors" type="text" style="width: 80%;">
<br>
    <input type="button" value="Add" class="addButton" onclick="add();" /> <!-- The 'onclick="add();" will call a the Javascript function add() -->
    <br />
<select id="mySelect" style="width:80%;height:150px; bottom: 0;" rows="10" multiple="multiple"></select>

這是Javascript / JQuery：

function add(){ // Our function called by your button
    var x = $("#jurors").val(); // This is a JQuery function that'll get the value of a element with the ID 'jurors' - our textbox
    $("#jurors").val(""); // Clear the textbox value
    if(x==""){} // If there's nothing in the textbox
    else{
        $("#mySelect").append("<option value='"+x+"'>"+x+"</option>" ); // Get our select and add a option with the value of our textbox value with the text of the textbox input
    }
}

$("#mySelect").change(function(e){ // This is called whenever the user selects a option
    var x = e.target.value; // Get the value of the selected option
    $("#mySelect option[value='"+x+"']").remove(); // Remove the selected option
});

這是JSFiddle的鏈接： http ： //jsfiddle.net/gS2jS/2/

當您在網站中使用此代碼時，您需要記住一些事項; 導入JQuery，將代碼放在正文中，代碼必須放在輸入等所需的后面，這里是帶有所需代碼的HTML：

<html>
<head>
</head>
<body>
<h3>Adding and removing options</h3>
<input name="jurors" id="jurors" type="text" style="width: 80%;">
<br>
<input type="button" value="Add" class="addButton" onclick="add();" /> <!-- The 'onclick="add();" will call a the Javascript function add() -->
<br />
<select id="mySelect" style="width:80%;height:150px; bottom: 0;" rows="10" multiple="multiple"></select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Import JQuery -->
<script>
function add(){ // Our function called by your button
    var x = $("#jurors").val(); // This is a JQuery function that'll get the value of a element with the ID 'jurors' - our textbox
    $("#jurors").val(""); // Clear the textbox value
    if(x==""){} // If there's nothing in the textbox
    else{
        $("#mySelect").append("<option value='"+x+"'>"+x+"</option>" ); // Get our select and add a option with the value of our textbox value with the text of the textbox input
        }
    }

$("#mySelect").change(function(e){ // This is called whenever the user selects a option
    var x = e.target.value; // Get the value of the selected option
    $("#mySelect option[value='"+x+"']").remove(); // Remove the selected option
});
</script>
</body>
</html>

這個答案比我希望的要長，抱歉。 無論如何，如果您需要任何幫助，請不要猶豫，發表評論。

Jquery使用submit to select list從輸入中添加帶有值的選項

問題描述

1 個解決方案

解決方案1
2 已采納 2014-03-21 11:21:01

Jquery使用submit to select list從輸入中添加帶有值的選項

問題描述

1 個解決方案

解決方案1 2 已采納 2014-03-21 11:21:01

解決方案1
2 已采納 2014-03-21 11:21:01