Solved

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

Posted on 2011-03-10
3
377 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

914 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now