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

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??
LVL 4
lordrtAsked:
Who is Participating?
 
gery128Commented:
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
 
gery128Commented:
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
 
lordrtAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.