如何从html选择中删除选定的选项？

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.我对 Javascript 和 jQuery 很陌生，所以请耐心等待。

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 #listboxFootballPlayers - 左侧的列表框
#selectedFootballPlayers - The listbox on the right #selectedFootballPlayers - 右侧的列表框

I have 2 questions:我有两个问题：

How can I remove the selected item / option from #listboxFootballPlayers after I clicked on -> button.单击->按钮后，如何从#listboxFootballPlayers删除所选项目/选项。
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.为什么当我从#selectedFootballPlayers选择一个项目/选项后单击<- ，它会给我一条消息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 .在我看来，它没有在变量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/这是 jsfiddle 链接： http : //jsfiddle.net/7vspM/

Answer 1

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

Answer 2

Regarding 2):关于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();
});

Answer 3

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 .我已经注释掉了JS Fiddle demo 中似乎不需要的行。

As for your second question, I've rewritten the if / else statement:至于你的第二个问题，我已经重写了if / else语句：

$('input#btnRemoveFootballPlayerFromList').click(function() {
    if (!$('#selectedFootballPlayers option:selected')){
        alert("First select a player to remove.");
    }
    else {
        $('#selectedFootballPlayers option:selected').appendTo('#listboxFootballPlayers ');
    }
});

JS Fiddle demo . JS小提琴演示。

References:参考：

:selected . :selected 。
appendTo() . appendTo() 。

如何从html选择中删除选定的选项？

问题描述

3 个解决方案

解决方案1
3 已采纳 2011-11-19 14:13:51

解决方案2
1 2011-11-19 13:55:27

解决方案3
1 2011-11-19 14:12:18

如何从html选择中删除选定的选项？

问题描述

3 个解决方案

解决方案1 3 已采纳 2011-11-19 14:13:51

解决方案2 1 2011-11-19 13:55:27

解决方案3 1 2011-11-19 14:12:18

解决方案1
3 已采纳 2011-11-19 14:13:51

解决方案2
1 2011-11-19 13:55:27

解决方案3
1 2011-11-19 14:12:18