delete options from a drop down

crmpicco · February 17th, 2006, 07:29 AM

How can I dynamically add/delete options from a select object using JavaScript?
I am building new options in via JS, but want to delete all these first....

Code:

<select name="stadium" id="stadium" class="selects">
            <option selected>All</option>
            <option>Ibrox</option>
            <option>Parkhead</option>
            <option>Tynecastle</option>
            <option>Somerset Park</option>
</select>

Thanks,

Picco:D

www.crmpicco.co.uk

joefawcett · February 17th, 2006, 07:50 AM

You can delete all options by setting

Code:

document.getElementById("stadium").options.length = 0;

To remove individual options you can use removeChild (in IE, not sure about others):

Code:

var oList = document.getElementById("stadium");
var oOption = oList.options[2]; //Parkhead
oList.removeChild(oOption);

--

Joe (Microsoft MVP - XML)

crmpicco · February 17th, 2006, 07:51 AM

thanks Joe, worked great

www.crmpicco.co.uk

interrupt · February 17th, 2006, 09:15 AM

Just for a bit of fun on a boring quiet work friday afternoon I worked out a really long line of code to do the three line option above. Only this time I'm passing in the selectedIndex, so you delete whatever is selected. Probably not useful whatsoever, but i love shrinking lines of code wherever I can. Good learning excersize too! Can anyone find a shorter way? Just for fun:

var remElem =document.forms['form1'].elements['stadium'].removeChild(document.forms['form1'].elements['stadium'].options[document.forms['form1'].elements['stadium'].selectedIndex])

Joe's way is probably way more easy to use, but its fun to play with things like this I find! Obviously you need a form called form1 and a select called stadium.

Cheers!
Joe

crmpicco · February 17th, 2006, 09:36 AM

this also works:

Code:

/*
FUNCTION NAME: deleteOption
Delete all the current options from the required drop down menu
*/
function deleteOption(selectbox)
{
    while(document.forms["fexp"].elements[selectbox].childNodes.length>0) {document.forms["fexp"].elements[selectbox].removeChild(document.forms["fexp"].elements[selectbox].childNodes[0])}
}

www.crmpicco.co.uk

akj504 · July 21st, 2008, 05:37 AM

Thanks Joefawcett - I was trying this from morning and finally your code worked.