我试图这样做,以便一旦选择了下拉选项,它将从菜单中删除,然后一旦选择了另一个,之前删除的选项将返回到菜单.有没有办法用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按钮将其返回列表.
解决方法
您可以将此作为基础：
<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>
