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

2018-06-23 21:30:34

我试图做到这一点，一旦选择了下拉选项，它将从菜单中移除，然后一旦选择了另一个，先前移除的选项将返回到菜单。有没有办法使用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>

等等，有更多的选择。一旦选择了默认值以外的选项，它将被填充到一个“航班信息”区域，它有一个小的“X”格“按钮”来清除它。我想让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>

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

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)

})

我想出了一个可以工作的脚本，至少在Firefox中。 Firefox中的问题在于，除非您离开控件（并且可能在其他浏览器中），否则change事件不会触发，并且在您拔出下拉菜单时发生click事件，而不仅仅是在进行选择时发生。这使得非常难以同步，并且在选择真正的航班之前不从列表中移除“没有选择的航班”项目。

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

我的结论是，虽然你可以得到这样一种大多数工作的动物，但你无法解决一些问题：

并不是所有的浏览器都以相同的方式实现，所以它们“打破”的方式不同。

在Firefox中，如果您单击包含下拉选择控件的iframe，则下拉列表将卷起，并且您无法做出任何响应。因此，现在代码会报告错误的事件一段时间，直到您离开控件或单击页面中的其他位置。

Firefox另外在jQuery库中引发脚本错误，但不是Chrome。

使用Alt↓等键盘快捷键弹出下拉菜单，至少在Firefox中不会抛出鼠标事件。所以你不得不添加更多的键盘事件陷阱（你确定你会在Mac上得到这个权利吗？Android？iPhone？）

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

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

链接地址: http://www.djcxy.com/p/66967.html

上一篇: How do I remove a <select> option once it's been chosen using jQuery?

下一篇: Detect a specific shape using OpenCV