Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Clearing a select box

Deep in to coursework now, but I just spent more time than I care to mention struggling with what should have been a very simple task; removing all of the items from an HTML select box using Javascript. Here’s the code that was causing me problems:

endSelect = document.getElementById('endSelect');
/* Clear out the current options */
for (i = 0; i < endSelect.options.length; i++) {
    endSelect.options[i] = null;
}

For some reason, this was only removing approximately half of the items in the list. I checked it in both IE and Phoenix and the same bug was evident, demonstrating that it was almost certainly a flaw in my code rather than a strange browser bug. After much tweaking and adding of alert() debugging statements I realised my folly: Every time the loop went round I was removing an item from the list of items in the select box, but my code was not taking this in to account (a classic example of changing a data stucture while processing it). Once this had dawned on me the replacement code took a matter of moments:

while (endSelect.options.length > 0) {
    endSelect.options[0] = null;
}

Hopefully this will soon be Googled and will eventually save someone else from making the same stupid mistake.

Posted 13th December 2002 at 9:36 pm

This is Clearing a select box by Simon Willison, posted on 13th December 2002.

View blog reactions

Next: Creative commons launch

Previous: Joe Clark interviews

39 comments

  1. Been there, done that, spent far too much time figuring it out! It's one of those things that once you know why it was broken, you'll never ever do it again though, so time well spent if you ask me. The fix I used was to store the length in a variable and then use that in my loop. That way it stayed as a fixed value and didnt keep changing each time you looped due to an item being removed.

    Daniel Nolan - 13th December 2002 22:15 - #

  2. I assume that endSelect.options.length = 0 was just too easy?

    Stuart Langridge - 13th December 2002 22:27 - #

  3. Good Lord that works! That's just plain bizzare - thanks for the tip :)

    Simon Willison - 13th December 2002 23:45 - #

  4. endSelect.options.length = 0 does indeed work but in my case I had to remove selected options in a multiple select, so er, my wasted time was valid! *puffs his chest up*

    Daniel Nolan - 13th December 2002 23:54 - #

  5. I'm thinking this entry will prove very useful somewhere down the road. Thanks.

    kyle - 16th December 2002 15:47 - #

  6. FWIW, it's not just JavaScript. I've come across this problem in Python, and I suspect the behavior present in many languages.

    Joe Grossberg - 18th December 2002 18:34 - #

  7. You can of course do it backwards without any problems: 
    
for (i = endSelect.options.length ; i > 0 ; i++) {
    endSelect.options[i] = null;
}

    Hadley - 22nd December 2002 14:58 - #

  8. Thanks a lot for the suggestion. If I would'nt have come accross this page, I would have wasted more time.

    Karun - 17th September 2003 20:02 - #

  9. I can't believe the length for a list is mutable. However, this quirk (and this page!) saved me tons of time.

    Vamsi - 27th October 2003 15:36 - #

  10. Sorry Hadley, but you won't go backwards with your solution (i++) and you will not remove the first one (rang zero) ;-) This one will be better : for (var i = endSelect.options.length - 1 ; i >= 0 ; i--) { endSelect.options[i] = null; } Regards, Laurent.

    Laurent - 30th October 2003 14:48 - #

  11. nice one, i have been trying to find out whats wrong, i knew it had something to do with the size of the list, but by the second i read "it was only removing about a half" i knew i found my answer. big up :P

    aLX - 3rd November 2003 13:51 - #

  12. THanks a lot guys. I was doing this for my program and thank goodness I did a google search to find this problem - I was about to tear all the hairs in my head!

    Muhammad Asif Rahim - 10th November 2003 07:42 - #

  13. Thanks a lot fro suggestion.

    pranesh - 10th November 2003 19:38 - #

  14. Thanks a lot...though I did some waste some time on tat but then saw this page and I was pretty confident tat I wasnt alone for not understandin this ;) Cheers, ViV

    ViV - 5th December 2003 01:46 - #

  15. Thanks alot, helped me out a great bit!

    Erik - 17th January 2004 17:45 - #

  16. Hi great site !!! I love it, it provides good informations, thanks a lot. Richard Leroy rleroy@avantages.com

    Richard Leroy - 21st January 2004 18:20 - #

  17. Yes, Man!! Tank you, I lost a lot of time upon this too. Looking backwards I am feeling very silly. Tks, Again. Regards.

    Leonardo - 6th February 2004 18:12 - #

  18. great tip thanks for the help

    Noel - 5th April 2004 03:39 - #

  19. "This one will be better : for (var i = endSelect.options.length - 1 ; i >= 0 ; i--) { endSelect.options[i] = null; } Regards, Laurent - 30th October 2003 14:48"

    Excellent Tip. Worked very well for me. - Iain

    Iain - 21st April 2004 20:33 - #

  20. Beautiful! Funny... even though this solution was posted almost 2 years ago, it is still reaching forward.

    Ben - 19th May 2004 21:59 - #

  21. Exact same problem - just spent .5 hour working on it - still being Googled two years later.

    Steve - 21st May 2004 02:01 - #

  22. Yep, thanks! :)

    tim - 14th October 2004 05:05 - #

  23. Cheers! You have certainly been googled and thanks for the tip! That had been bugging me for a while, literally :)

    Daniel - 12th April 2005 01:27 - #

  24. u are god :) u can understand how much agony did this cause me.. :)

    rajat - 28th April 2005 07:36 - #

  25. Thank god I have seen your page. Initially I have done the same mistake and breaking my head by using the for loop to clear the select list.

    Vijay - 15th June 2005 15:24 - #

  26. I have noticed in one of my projects that when you clear a large select list in IE, it can be extremely slow. In Firefox it works fine. Any suggestions?

    Patrick Fitzgerald - 15th June 2005 15:56 - #

  27. but how to remove selected options in a select box?

    angel - 15th September 2005 08:14 - #

  28. I also used endSelect.innerHTML = ""

    It had some strange side effects that only occur under certain circumstances.

    If the select has endSelect.style.display="none" after using endSelect.innerHTML = "" it would suddenly appear.

    It works but after a while ??? it fails. It is not really allowed i think.

    Under some circumstances it will make IE fail catastrofically. :)

    If you used this for clearing a select better use a different solution!!!!

    i tested this

    endSelect.options.length = 0

    and that one works great!...... until now. :)

    Thanks Stuart!

    Jean

    Jean - 3rd November 2005 16:25 - #

  29. I had the exact same problem, and a quick googling brought me to your blog. Thanks for saving me a headache!

    Jeff - 8th November 2005 17:12 - #

  30. Quote: but how to remove selected options in a select box?
    Not too hard really, you just need to take into account that when you remove an item, the next item in the list will move up one position. 
    endSelect = document.getElementById('endSelect');
/* Clear out the selected options */
for (i = 0; i < endSelect.options.length; i++) {
    if (endSelect.options[i].selected) {
        endSelect.options[i] = null;
        i--; // Next item moved to position 'i', move one step back so we don't skip it
    }
}

    ShadowLord - 19th January 2006 10:40 - #

  31. Such a simple solution to a quirky, but obvious problem (when you think about it). thanks - found your site first off when I "resorted" to google to solve it

    John Cox - 6th March 2006 23:23 - #

  32. Thanks mate.. this was really useful.. I was breaking my head on figuring out wht was going wrong.. pl. keep contributing such suggestions/tips .. i m sure u'll be unknowingly helping lot of ppl. thnx once again. ketan

    Ketan - 24th March 2006 09:21 - #

  33. More then 3 years later and still very helpful ;-) This blog saved me another headache. Thank you (and Google of course)!

    Peter Minne - 13th April 2006 18:02 - #

  34. Thanks a lot! I've just spent the afternoon trying to figure out the solution to this seemingly nonsensical problem. You're right though, classic example of manipulating the data while processing it-- thanks, again.

    Bill - 6th July 2006 18:36 - #

  35. thanks! would have taken me a while to figure this one out.

    morgan packard - 21st July 2006 16:46 - #

  36. sadasdas

    dasd - 27th July 2006 14:53 - #

  37. try this...

    var endSelect = document.getElementById("myselect"); while (endSelect.length > 0) { endSelect.remove(0); }

    Sam Stepanyan - 1st August 2006 15:42 - #

  38. As per: Patrick Fitzgerald - 15th June 2005 15:56

    I find this very slow indeed on IE (about 25 seconds for 800 entries!) and fine on FireFox (maybe be how IE stores some temporary data...). I have tried both length=0 and while....remove(0)

    Is there perhaps a way to replace the list rather than remove all options(which IE must be doing iteratively)?

    David Moore - 6th August 2006 15:54 - #

  39. this info was useful to me... thanks for putting up here... i was able to avoid one issue using this .. thanks..

    krishna - 5th October 2006 12:00 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2002/12/13/clearingASelectBox

A django site