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

Question

I'm trying to make it so that once the dropdown option is selected, it'll be removed from the menu, and then once another one is selected the previous removed option will get returned to the menu. Is there a way to do this using jQuery?

I'm new to jQuery and JavaScript, so I'm not too sure what I'm doing, and all my poking around has only further broken code. Thanks!

For reference, this is what my HTML looks like:

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

and so on, with more options. Once an option other than default is selected, it is populated down to a "flight information" div, that has a small "X" div "button" to clear it. I want the X button to return it to the list.

Answer 1

You can use this as a base:

<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

Here's a solution that caches all the options when page loads. When an option is selected, the options are replaced from the cache with all the options whose values aren't the one just selected

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 3

I came up with script that worked kind of ok, at least in Firefox. The problem with it in Firefox was that the change event doesn't fire until you leave the control (and maybe in other browsers besides), and the click event occurs when you pull out the dropdown, not just when making a selection. This made it very hard to synchronize and to not remove the "no flight chosen" item from the list until after a real flight was chosen.

So, I did a bit of research on the issue and then tried to work up my own jQuery plugin (jsFiddle) for detecting select dropdown and rollup. It gets better, but still doesn't work perfectly in Firefox.

My conclusion is that while you can get such an animal mostly working, you can't get around a few things:

• Not all browsers implement things the same way, so they "break" differently.
• In Firefox, if you click out of an iframe containing a dropped-down select control, the dropdown rolls up and there is nothing you can do to respond to it. So now the code reports the wrong event for a while until you either leave the control or click elsewhere in the page.
• Firefox additionally was throwing script errors in the jQuery library, but not Chrome.
• Using keyboard shortcuts such as Alt↓ to pop open the dropdown do not throw mouse events, at least in Firefox. So you'd have to add even more trapping of keyboard events (and are you sure you'll get this right on the Mac? Android? iPhone?)

Note: I am aware that my code in that fiddle is not optimal and has bugs. It is an abandoned prototype, not a finished product. :)

So, may I suggest instead that you use a custom select box, which can do most anything you want it to. Here's one example select box replacement jQuery plugin.