I've come up with a Javascript/JQuery solution. Let's go through it so you know what's going on and if you need to change it you can. I've left your HTML pretty much the same (I've taken away some styling for the sake of development), anyway here it is:
<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>
Here's the 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
});
Here's the link to the JSFiddle: http://jsfiddle.net/gS2jS/2/
When you use this code in your website, there are a few things you'll have to remember; import JQuery, put the code in the body and the code must be placed after the inputs etc required, here's the HTML with the required code:
<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>
That answer was longer than I hoped, sorry about that. Anyways, if you need any help, don't hesitate to leave a comment.
