Home/ Questions/Q 6819117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:16:04+00:00

My actual question is quite bit complicated compared to its title. I am very

  • 0

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:

  1. How can I remove the selected item / option from #listboxFootballPlayers after I clicked on -> button.

  2. 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.net/7vspM/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(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 = '';
        }
    });
});
    • 0