Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 17th, 2006, 07:29 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default delete options from a drop down

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
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
 
Old February 17th, 2006, 07:50 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
 
Old February 17th, 2006, 07:51 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

thanks Joe, worked great

www.crmpicco.co.uk
 
Old February 17th, 2006, 09:15 AM
Friend of Wrox
 
Join Date: May 2004
Location: , , .
Posts: 212
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

 
Old February 17th, 2006, 09:36 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
 
Old July 21st, 2008, 05:37 AM
Registered User
 
Join Date: Apr 2008
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Unable to delete file System.IO.Delete error maricar C# 13 March 14th, 2014 06:50 AM
php/mysql delete button and delete query dungey PHP Databases 17 April 11th, 2009 12:24 PM
Drop Down options to select stream for Listener sam8599 Javascript 0 May 29th, 2006 12:18 PM
drop down list values based on another drop down noor ASP.NET 1.0 and 1.1 Basics 3 July 5th, 2005 09:57 AM
how to delete a row when click delete hyperlink naveenkumarg1 Pro JSP 1 August 16th, 2004 01:29 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.