使用jQuery选择后,如何删除<select>选项？

Question

我试图这样做,以便一旦选择了下拉选项,它将从菜单中删除,然后一旦选择了另一个,之前删除的选项将返回到菜单.有没有办法使用jQuery做到这一点？

我是jQuery和JavaScript的新手,所以我不太清楚我在做什么,而且我所有的探索只会进一步破坏代码.谢谢!

作为参考,这是我的HTML的样子:

<div class="FlightList">
                    <select id="departureFlightsControl">
                        <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>

等等,有更多选择.一旦选择了默认选项以外的选项,它就会填充到"航班信息"div,它有一个小的"X"div"按钮"来清除它.我想要X按钮将其返回列表.

Answer 1

您可以使用它作为基础：

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