jquery - 如何从HTML选择中删除选定的选项？

与标题相比，我的实际问题相当复杂。我对JavaScript和jquery很新，所以请耐心等待。jquery - 如何从HTML选择中删除选定的选项？

我会申明你在阅读我的问题之前先运行这段代码，这样你才能明白我在做什么。

<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>

之前，我先从问题，请注意：

#listboxFootballPlayers - 列表框左侧
#selectedFootballPlayers - 在右侧

列表框我有2个问题：

1.）在点击->按钮后，如何从#listboxFootballPlayers中删除所选项目/选项。

2）为什么当我在<-点击我从#selectedFootballPlayers选定的项目/选项后，它给了我一个消息Select a football player to be removed from the list.在我看来，它并不能对变量selectedRemoveFootballPlayerId赋值。

请问我是否有些问题不清楚。请帮忙。提前致谢。

顺便说一句这里是的jsfiddle链接：

来源

2011-11-19 NinjaBoy

如果您发布工作中的jsfiddle代码或链接到一个网站您将获得更好的答案，让我们不必做尽可能多打字 –

不要试图挑选的运动员存储在每次点击一个选项时都会变量，为什么当单击 - >（或< - ）按钮时，您只是从选择框中获取选定的选项？这将使它更简单，可以允许多选，通过键盘而不是鼠标进行选择等。 –

@BrianHoover好吧，我会尝试jsfiddle。这将是我第一次。 – NinjaBoy

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

来源

2011-11-19 14:13:51 thecodeparadox

@ChickenBoy我认为这将解决您的所有问题 – thecodeparadox

非常感谢。这帮了很多。 – NinjaBoy

关于2）：

的问题是，您在创建为其指定元素前分配点击功能。当你创建你的选择，你应该给它分配而不是像这样：

$(option).click(function() { 
selectedRemoveFootballPlayerId = $(this).attr('value'); 
selectedRemoveFootballPlayerName = $(this).text(); 
});

来源

2011-11-19 13:55:27 Gil

关于议题之一，这是比较容易简单地选择的选项元素从一个列表移动到另一个：

$('#listboxFootballPlayers option:selected').appendTo('#selectedFootballPlayers');

我已经在JS Fiddle demo中注明了不需要的行。

关于你的第二个问题，我已经改写了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。

参考文献：

:selected。
appendTo()。

来源

2011-11-19 14:12:18

坦克很多回答我的第一个问题.... – NinjaBoy

不客气，我也已经解决了第二部分现在，在我的编辑。 –

jquery - 如何从HTML选择中删除选定的选项？

回答

相关问题