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>

Answer 2

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

因此，我对此问题进行了一些研究，然后尝试使用my own jQuery plugin (jsFiddle)来检测选择下拉列表和汇总。它得到更好，但仍然无法在Firefox中完美运行。

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

并非所有浏览器都以相同的方式实现内容，因此它们会以不同方式“中断”。
在Firefox中，如果您点击包含下拉选择控件的iframe，则下拉列表会向上滚动，并且您可以执行 nothing 来响应它。所以现在代码报告错误的事件一段时间，直到您离开控件或单击页面中的其他位置。
Firefox还在jQuery库中抛出了脚本错误，但不是Chrome。
使用键盘快捷键（例如 Alt ↓）弹出下拉列表不会抛出鼠标事件，至少在Firefox中是这样。所以你必须添加更多的键盘事件（你确定你会在Mac上实现这一点吗？Android？iPhone？）

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

所以，我可以建议您使用自定义选择框，它可以执行您想要的任何操作。这是one example select box replacement jQuery plugin。

Answer 3

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

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)

})

Answer 4

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

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

一旦使用jQuery选择<select>选项，如何删除<select>选项？</select>

4 个答案: