javascript - How to remove a selected option from html select?

My actual question is quite bit plicated pared 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 #listboxFootballPlayers after I clicked on -> button.
Why is it that when I click on <- after I selected an item / option from #selectedFootballPlayers it gives me a message Select a football player to be removed from the list. It seems to me that it doesn't assign the value on the variable selectedRemoveFootballPlayerId.

Please ask me if there are something that are not clear with my question. Please help.

Here is the jsfiddle link: /

My actual question is quite bit plicated pared 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 #listboxFootballPlayers after I clicked on -> button.
Why is it that when I click on <- after I selected an item / option from #selectedFootballPlayers it gives me a message Select a football player to be removed from the list. It seems to me that it doesn't assign the value on the variable selectedRemoveFootballPlayerId.

Please ask me if there are something that are not clear with my question. Please help.

Here is the jsfiddle link: http://jsfiddle/7vspM/

Share Improve this question edited Feb 21, 2021 at 10:54 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 19, 2011 at 13:45 NinjaBoy 3,75519 gold badges57 silver badges69 bronze badges

2 You'll get better answers if you post working code in jsFiddle or link to a site, so that we don't have to do as much typing – Brian Hoover Commented Nov 19, 2011 at 13:49
1 Instead of trying to store the selected player in a variable each time an option is clicked, why don't you simply get the selected option from the select box when the -> (or <-) button is clicked? This would make it simpler, would allow multi-selection, selection through keyboard instead of mouse, etc. – JB Nizet Commented Nov 19, 2011 at 13:51
@BrianHoover Ok I'll try jsfiddle. It will be my first time. – NinjaBoy Commented Nov 19, 2011 at 13:54
@BrianHoover Here is the jsfiddle. Hope this helps jsfiddle/7vspM – NinjaBoy Commented Nov 19, 2011 at 13:59

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

$(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 = '';
        }
    });
});

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();
});

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 mented 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 ');
    }
});

JS Fiddle demo.

References:

:selected.
appendTo().

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to remove a selected option from html select? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)