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.

score 12 · Accepted Answer · answered Jun 12 '10 at 05:19

12

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);
    }
}

answered Jun 12 '10 at 05:19

Mark Byers

811,555
193
1,581
1,452

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! :) – SoLoGHoST Jun 12 '10 at 06:17
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 ``, use: `action_list.remove(selected[i])`. – Neph Jan 14 '21 at 10:46

score 6 · Answer 2 · answered Jun 12 '10 at 04:55

6

You can do it much easier using jQuery:

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

answered Jun 12 '10 at 04:55

dzida

8,854
2
36
57

Do I need to include libraries for this to work? If so, which one(s) do I need? – SoLoGHoST Jun 12 '10 at 04:57
@SoLoGHoST - It works fine if you just download and use jQuery. – Gert Grenander Jun 12 '10 at 05:15
@SoLoGHoST - you need to reference jquery library in your code. You can do this by inserting line: (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: http://jquery.com. – dzida Jun 12 '10 at 05:21
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. – SoLoGHoST Jun 12 '10 at 06:20
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;) – dzida Jun 13 '10 at 17:46
I always used $("#actions_list option:selected").removeAttr("selected"); but this does not seam to work anymore... .remove() works fine – cwhisperer Jan 09 '18 at 13:49

score 0 · Answer 3 · answered Nov 01 '13 at 02:54

0

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

try this instead to remove multiple selection

answered Nov 01 '13 at 02:54

user2943671

1

score 0 · Answer 4 · answered Jan 12 '18 at 08:23

0

Removing multiple options from select based on condition:

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

answered Jan 12 '18 at 08:23

Rahul Jain

3,065
1
13
17

Problem with multiple select removing more than 1 option

4 Answers4