HOME > TUTORIALS > JAVASCRIPT > DYNAMICALLY GENERATE A DROPDOWN


	TIPS
		WEB DESIGN
		HTML
		CSS
		JAVASCRIPT
		PHP
		MySQL
		SEO



	TUTORIALS
		WEB DESIGN
		HTML
		JAVASCRIPT
		PHP
		SEO



	RESOURCES
		ADD LINK
		LINK TO US



	TOP DIRECTORIES
	COMMENTS
	SUBSCRIBE
	PRIVACY POLICY
	SEARCH

Dynamically generate a dropdown

This code lets you dynamically populate a HTML form dropdown based on which option a user selects in another dropdown.


<html>

    <head>

        <title>Dropdown Javascript</title>

        <script language="javascript" type="text/javascript">

            function SelectSubCat()

                {

                removeAllOptions(Dropdown.Subcategory);



                if(Dropdown.Category.value == 'Cat1'){

                    addOption(Dropdown.Subcategory,"Subcat1.1", "Subcategory 1.1");

                    addOption(Dropdown.Subcategory,"Subcat1.2", "Subcategory 1.2");

                    addOption(Dropdown.Subcategory,"Subcat1.3", "Subcategory 1.3");

                    }



                if(Dropdown.Category.value == 'Cat2'){

                    addOption(Dropdown.Subcategory,"Subcat2.1", "Subcategory 2.1");

                    addOption(Dropdown.Subcategory,"Subcat2.2", "Subcategory 2.2");

                    addOption(Dropdown.Subcategory,"Subcat2.3", "Subcategory 2.3");

                    }

                } // end function SelectSubCat



            function removeAllOptions(selectbox)

                {

                var i;

                for(i=selectbox.options.length-1;i>=0;i--)

                    {

                    selectbox.remove(i);

                    }

                }



            function addOption(selectbox, value, text )

                {

                var optn = document.createElement("OPTION");

                optn.text = text;

                optn.value = value;

                selectbox.options.add(optn);

                }

        </script>

    </head>

    <body>

        <form name='Dropdown' method='post' action='formresults.php'>

            <select name='Category' onChange='SelectSubCat();'>

                <option value=''>Select...</option>

                <option value='Cat1'>Category 1</option>

                <option value='Cat2'>Category 2</option>

            </select>

            <select id='Subcategory' name='Subcategory'>

                <option value=''>Select...</option>

            </select>

            <input type='submit' value='Submit'>

        </form>

    </body>

</html>

Comments

Comment by dave on 2006-12-06
i love it. but it doesn\'t work in safari.

Comment by Jordan shoes on 2011-08-08
Just because we love Jordan, also we think Jordan shoes will made you be more sexy. Jordan shoes at cheap price.cme and pick Jordan shoes .http://www.pickitehome.com

Comment by Sherry on 2011-07-04
HHIS I sohuld have thought of that!

Comment by discount Michael Jordan Shoes on 2010-09-17
Air Jordan Shoes are always so attractive, good quality can ensure the wearer's feet, not only that, the Michael Jordan Shoes has become a fashion, many young people are very fanatical Air Jordan. High price so many people can realize their dreams. Well now, our products directly from third-party products, so we can provide cheap Jordan Basketball Shoes and New Jordan Shoes, high quality, excellent service, come on, give yourself a choice. We offerAir Jordan 1, Air Jordan 2, Air Jordan 3,Air Jordan 4, Air Jordan 5, Air Jordan 6, Air Jordan 7, Air Jordan 8, Air Jordan 9, Air Jordan 10, Air Jordan 11 and so on!

Comment by Steve on 2012-04-09
If anyone is having problems getting this to work, simply put document. before any instance of the word Dropdown. Remember to include the .

Comment by 24hjerseys on 2012-04-20
Where to buy the best China NFL Jerseys. ? So many people are chasing for the new nike nfl jerseys now.Fortunately we offer them for sale at a good price.Welcome to our online shop.new Nike NFL Jerseys Do you want to get the newest awsome nfl nike jerseys? We will make you the rocking star on the bleacher. How to grab hot girls' eyeballs?Just come to us authentic Nike NFL Game Jerseys. The official website posted that the new nike nfl jerseys are manufacturing with a new upgraded fabric which is lighter.It will make the players feel more comfortable in the games. What are you waiting for? Get your own new Nike NFL Jerseys. collection in our website. The 2012 NFL season will show us a splendent and glorious game and non-smoking battle. Every team will wear their China NFL Jerseys. to participate in the cruel rival.We aslo want to be involved in such a excited moment.So we are dreaming to have our own Nike NFL Jerseys. Come to 24HJERSEYS, we will realize your dream.You can buy any awsome jersey at a low price.

Comment by Alaa on 2012-05-06
any idea how to add one more dropdown list which depend on the second dropdown list thanks in advance Alaa

NEWS

New tip: open link in new window

New resource: Internet Explorer downloads

New tip: start cursor in a form field

New tutorial: upload files using a HTML form

Directory of webmaster resources

New section: CSS tips

New tip: finding webpages to link to your site

Updated directory list

New Hexadecimal Color Chart

New tips on Alexa ranking & clean linkage