Solved

dynamically fill second drop-down list based on selection in first one?

Posted on 2011-03-10
3
386 Views
Last Modified: 2012-05-11
Hello
Following my previous post on filling values in a dynamical way: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26876601.html


I wanted to know if it is possible to fill a second drop-down box based on the value selected in the first drop-down box present on the same web form, example, if in the first drop down box I select the value "number", the second drop-down is filled with for example numbers 1 to 10, and if I select "alphabets" in the first one, the second one gets filled with "a" to "j" for example.
Any code which can help me do this, whereby by default the 2nd drop-down is empty until a selection is made in the first one then populated as required??
0
Comment
Question by:lordrt
  • 2
3 Comments
 
LVL 9

Expert Comment

by:gery128
ID: 35106149
Yes, you can do it using Java Script.

Kindly refer this link:
http://www.felgall.com/jstip22.htm

It has set second drop-down values based on first, but that value are given directly (by setting option tags) you can use array, json object to load those value also.


0
 
LVL 4

Author Comment

by:lordrt
ID: 35106185
will this code be same if am using jqery?
 
function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
0
 
LVL 9

Accepted Solution

by:
gery128 earned 500 total points
ID: 35106239
in jQuery, you can do it much easier way.

You should decide your data-source first: xml, json or database?

here are some links which uses different data-sources for filling dropdownbox using jQuery:
http://blog.everymanhosting.com/web-design-articles-news/so-you-need-to-fill-a-dropdown%C2%A0dynamically/

http://think2loud.com/using-jquery-and-xml-to-populate-a-drop-down-box/
http://www.codeproject.com/KB/combobox/ChainedDropDownJQueryXML.aspx




0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question