JQuery добавление параметров со значением из ввода с помощью отправки в список выбора

Question

JQuery добавление параметров со значением из ввода с помощью отправки в список выбора

0

У меня есть этот код 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>

И то, что я делаю с этим, - это получить значение из поля "Enter", нажав кнопку "Добавить" и добавить его в поле выбора. Также, если возможно удалить значение из окна selct, щелкнув по нему. Мне нужны значения окна выбора как список, который нужно вставить позже в мою БД. Я полагаю, это можно сделать с помощью jQuery (добавление и удаление значений), но мои знания языка слишком просты, чтобы сделать это.

Благодарим вас за помощь.

Newbie 21 март 2014, в 11:39

Источник

0

Покажите нам свою попытку. Люди помогут вам с вашим кодом, но не напишут его напрямую.
Utkanos 21 март 2014, в 10:39
3

learn.jquery.com
Mohammad Adil 21 март 2014, в 10:40

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Покажите нам свою попытку. Люди помогут вам с вашим кодом, но не напишут его напрямую.

Xanco · Accepted Answer · 2014-03-21T08-31-00.000Z

Я придумал решение 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 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 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>

Этот ответ был длиннее, чем я надеялся, сожалею об этом. В любом случае, если вам нужна помощь, не стесняйтесь оставлять комментарий.

Огромное спасибо. Работал как шарм.