您可以将其用作基础：

<div class="FlightList">
   <select id="departureFlightsControl" onchange="addToInfo(this)">
        <option value="default" >No flight chosen</option>
        <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option>
        <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option>
        <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option>
        <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option>
    </select>
</div>
<div id="flightInformation">    

</div>
<script type="text/javascript">
function addToInfo(element){
    var opt = $(element).find(":selected").remove();
    var span = $('<span style="margin-left:20px;" onclick="addToList(this)">  X</span>');
    $(span).data('option', opt);
    var div = $('<div>'+$(opt).html()+'</div>')
    $(div).append(span);
    $('#flightInformation').append(div);
}

function addToList(element){
    $('#departureFlightsControl').append($(element).data('option'));
    $(element).closest('div').remove();
}
</script>

我想出了一个运行良好的脚本，至少在 Firefox 中是这样。它在 Firefox 中的问题是，在change您离开控件（可能在其他浏览器中）之前，该事件不会触发，并且该click事件在您拉出下拉菜单时发生，而不仅仅是在进行选择时。这使得在选择真正的航班之前很难同步并且不从列表中删除“未选择航班”项目。

所以，我对这个问题做了一些研究，然后尝试开发我自己的 jQuery 插件（jsFiddle）来检测选择下拉和汇总。它变得更好，但仍然不能在 Firefox 中完美运行。

我的结论是，虽然你可以让这样的动物大部分工作，但你无法绕过一些事情：

• 并非所有浏览器都以相同的方式实现事物，因此它们以不同的方式“破坏”。
• 在 Firefox 中，如果您从包含下拉选择控件的 iframe 中单击，下拉列表会卷起，您无法对其做出任何响应。因此，现在代码会在一段时间内报告错误事件，直到您离开控件或单击页面中的其他位置。
• Firefox 还在 jQuery 库中抛出了脚本错误，但 Chrome 没有。
• 使用诸如Alt↓弹出下拉菜单之类的键盘快捷键不会引发鼠标事件，至少在 Firefox 中是这样。所以你必须添加更多的键盘事件陷阱（你确定你会在Mac上得到这个吗？Android？iPhone？）

注意：我知道我在那个小提琴中的代码不是最佳的并且有错误。它是一个废弃的原型，而不是成品。:)

所以，我可以建议您使用自定义选择框，它可以做任何您想做的事情。这是一个示例选择框替换 jQuery 插件。

这是一个在页面加载时缓存所有选项的解决方案。选择选项后，将选项从缓存中替换为所有值的选项

var departSelect=$('#departureFlightsControl');
/* cache clones of all options*/
var departOptions=departSelect.find('option').clone();

departSelect.change(function(){
    var currVal=$(this).val();

    /* other display logic using currVal*/


    /* get new options that don't include current one selected from cache*/
    var newOptions= departOptions.clone().filter(function(){
        return $(this).val() ! = currVal;
    });

    $(this).html(newOptions)

})

这是一个合理的解决方案，可以保持简单并完成工作。如果您愿意，您显然可以增加功能的特异性。

$(document).ready(function () {  
    var temp = 0;
    if ($(':selected')) {
        $('select').change(function () {
            if (temp !== 0) {
                temp.show();
            }
            temp = $(':selected').hide();
            return temp;
        });
    } else {
        ('select').show();
    }
 });