Problem with multiple select removing more than 1 option

Question

There seems to be a problem with the JS Code for Opera browsers, as it only removes the last option tag that is selected within a multiple select tag, can someone please help me.

Here is the HTML for this:

<select id="actions_list" name="layouts" multiple style="height: 128px; width: 300px;">
    <option value="forum">forum</option>
    <option value="collapse">collapse</option>
    <option value="[topic]">[topic]</option>
    <option value="[board]">[board]</option>
</select>

Of course it's within a form tag, but there's a ton more code involved with this form, but here is the relevant info for this.

Here is the JS that should handle this, but only removes the last selected option in Opera, not sure about other browsers, but it really needs to remove all selected options, not just the last selected option...

var action_list = document.getElementById("actions_list");
var i = action_list.options.length;
while(i--)
{
    if (action_list.options[i].selected)
    {
        action_list.remove(i);
    }
}

What is wrong with this? I can't figure it out one bit.

Herminahermine

Answer 1

It's easiest to do this with jQuery but it you want to do this using plain Javascript you can.

The problem you are experiencing is that when you remove an item from the options list in Opera it deselects all the selected items, so only the first is removed. A workaround is to first remember which items were selected before removing any.

var action_list = document.getElementById("actions_list");

// Remember selected items.
var is_selected = [];
for (var i = 0; i < action_list.options.length; ++i)
{
    is_selected[i] = action_list.options[i].selected;
}

// Remove selected items.
i = action_list.options.length;
while (i--)
{
    if (is_selected[i])
    {
        action_list.remove(i);
    }
}

Hanover

Thanks a million, never thought to do that. This was really bugging the hell out of me. Why can't they all work the same... argg... Well, that's the glory of diversity. Cheers :) Bytheway, I'm not very familiar with jQuery, as easy as it allegedly is, but I guess I'm just an old-fashioned fool and prefer JS. Thanks again! :) – Herminahermine

This answer is more than 10 years old but it's still relevant because all options are still deselected after deleting the first (tested with FF84). A simple suggestion for everyone else who finds it and is working with long lists: Don't save the "selected" status of all options but instead only the position (i) of the ones that are selected (selected.push(i)) in the <select>. This makes for a much shorter selected list/array and a shorter second loop. To remove the option from the <select>, use: action_list.remove(selected[i]). – Jon

Answer 2

You can do it much easier using jQuery:

$('#actions_list option:selected').remove()

Hunyadi

Do I need to include libraries for this to work? If so, which one(s) do I need? – Herminahermine

@Herminahermine - It works fine if you just download and use jQuery. – Punish

@Herminahermine - you need to reference jquery library in your code. You can do this by inserting line: <script type="text/javascript" src="jquery-1.4.2.min.js"></script> (assuming "jquery-1.4.2.min.js" is in directory of your html file). You can download jquery files from the site I mentioned in my post: jquery.com. – Hunyadi

Ok, thanks, I'm not a huge fan of jQuery, no offense, just seems a bit too complicated for me. Will eventually get there I suppose, but not yet. Thanks anyways. – Herminahermine

I had the same opinion on jQuery some time ago and now I can imagine building projects without this library. After short time you will notice that it is far easier the plain JS sometimes (compare 10+ line function with 1 line of jquery) but of course it is up to you what tools suits your projects the best. Anyway it's good you solved this issue;) – Hunyadi

I always used $("#actions_list option:selected").removeAttr("selected"); but this does not seam to work anymore... .remove() works fine – Grantley

Answer 3

$.each($('[name="alltags"] option:selected'), function( index, value ) {
  $(this).remove();
});

try this instead to remove multiple selection

Overbuild

Answer 4

Removing multiple options from select based on condition:

while(SelectBox.length > 1){
    if(SelectBox[SelectBox.length -1].text != "YourCondition"){
       SelectBox.remove(SelectBox.length -1);
    }
}

Lennie