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

IT技术

更新时间：2025-04-205

admin管理员组
文章数量:1415099

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().

本文标签： javascriptHow to remove a selected option from html selectStack Overflow

版权声明：本文标题：javascript - How to remove a selected option from html select? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745157414a2645260.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

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

3 Answers 3

更多相关文章