How to remove a selected option from html select?
Question
My actual question is quite bit complicated compared to its title. I am very new to Javascript and jQuery so please bear with me.
I would suggest that you run this code first before reading my question so you can understand what I'm trying to do.
<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript" >
var selectedAddFootballPlayerId = '';
var selectedAddFootballPlayerName = '';
var selectedRemoveFootballPlayerId = '';
var selectedRemoveFootballPlayerName = '';
$(document).ready(function() {
$('#listboxFootballPlayers option').click(function() {
selectedAddFootballPlayerId = $(this).attr('value');
selectedAddFootballPlayerName = $(this).text();
});
$('#selectedFootballPlayers option').click(function() {
selectedRemoveFootballPlayerId = $(this).attr('value');
selectedRemoveFootballPlayerName = $(this).text();
});
$('input#btnAddFootballPlayerToList').click(function() {
if (selectedAddFootballPlayerId == '') {
alert("Select a football player to be added from the list.");
} else {
var option = new Option(selectedAddFootballPlayerName , selectedAddFootballPlayerId);
$(option).html(selectedAddFootballPlayerName);
$('#selectedFootballPlayers').append(option);
selectedAddFootballPlayerId = '';
selectedAddFootballPlayerName = '';
}
});
$('input#btnRemoveFootballPlayerFromList').click(function() {
if (selectedRemoveFootballPlayerId == '') {
alert("Select a football player to be removed from the list.");
} else {
var option = new Option(selectedRemoveFootballPlayerName , selectedRemoveFootballPlayerId);
$(option).html(selectedRemoveFootballPlayerName);
$('#listboxFootballPlayers').append(option);
selectedRemoveFootballPlayerId = '';
selectedRemoveFootballPlayerName = '';
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="listboxFootballPlayers" size="5" multiple="multiple" style="width: 200px;">
<option value="l1">Cristiano Ronaldo</option>
<option value="l2">Ricardo Kaka</option>
<option value="l3">Lionel Messi</option>
<option value="l4">Gerd Muller</option>
<option value="l5">Johan Crujjf</option>
<option value="l6">Franz Beckenbauer</option>
<option value="l7">David Beckham</option>
</select>
</td>
<td>
<table>
<tr><td><input type="button" id="btnAddFootballPlayerToList" value="->" /> </td></tr>
<tr><td><input type="button" id="btnRemoveFootballPlayerFromList" value="<-" /></td></tr>
</table>
</td>
<td>
<select id="selectedFootballPlayers" size="5" multiple="multiple" style="width: 200px;"></select>
</td>
</tr>
</table>
</body>
</html>
Before I start with the question please take note:
#listboxFootballPlayers - The listbox on the left #selectedFootballPlayers - The listbox on the right
I have 2 questions:
How can I remove the selected item / option from
#listboxFootballPlayersafter I clicked on->button.Why is it that when I click on
<-after I selected an item / option from#selectedFootballPlayersit gives me a messageSelect a football player to be removed from the list.It seems to me that it doesn't assign the value on the variableselectedRemoveFootballPlayerId.
Please ask me if there are something that are not clear with my question. Please help.
Here is the jsfiddle link: http://jsfiddle.net/7vspM/
3 answers
solution1
3 ACCPTED 2011-11-19 14:13:51
$(document).ready(function() {
$('#listboxFootballPlayers option').click(function() {
selectedAddFootballPlayerId = $(this).attr('value');
selectedAddFootballPlayerName = $(this).text();
});
$('#selectedFootballPlayers option').live('click', // `live()` event for `option` bcoz, option in this select will
// create after DOM ready
function() {
selectedRemoveFootballPlayerId = $(this).attr('value');
selectedRemoveFootballPlayerName = $(this).text();
});
$('input#btnAddFootballPlayerToList').click(function() {
if (selectedAddFootballPlayerId == '') {
alert("Select a football player to be added from the list.");
} else {
var option = new Option(selectedAddFootballPlayerName, selectedAddFootballPlayerId);
$(option).html(selectedAddFootballPlayerName);
$('#selectedFootballPlayers').append(option);
$('#listboxFootballPlayers option:selected').remove(); // remove selected option
selectedAddFootballPlayerId = '';
selectedAddFootballPlayerName = '';
}
});
$('input#btnRemoveFootballPlayerFromList').click(function() {
if (selectedRemoveFootballPlayerId == '') {
alert("Select a football player to be removed from the list.");
} else {
var option = new Option(selectedRemoveFootballPlayerName, selectedRemoveFootballPlayerId);
$(option).html(selectedRemoveFootballPlayerName);
$('#selectedFootballPlayers option:selected').remove(); // remove selected option
$('#listboxFootballPlayers').append(option);
selectedRemoveFootballPlayerId = '';
selectedRemoveFootballPlayerName = '';
}
});
});
solution2
1 2011-11-19 13:55:27
Regarding 2):
The problem is that you assign the click functionality before you create the element to assign it to. When you create your option you should assign it instead, like this:
$(option).click(function() {
selectedRemoveFootballPlayerId = $(this).attr('value');
selectedRemoveFootballPlayerName = $(this).text();
});
solution3
1 2011-11-19 14:12:18
Regarding question one, it's somewhat easier to simply move the selected option element from one list to the other:
$('#listboxFootballPlayers option:selected').appendTo('#selectedFootballPlayers');
I've commented out the lines that don't appear to be needed in the JS Fiddle demo .
As for your second question, I've rewritten the if / else statement:
$('input#btnRemoveFootballPlayerFromList').click(function() {
if (!$('#selectedFootballPlayers option:selected')){
alert("First select a player to remove.");
}
else {
$('#selectedFootballPlayers option:selected').appendTo('#listboxFootballPlayers ');
}
});
References:
-
:selected. -
appendTo().
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.