Solved

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

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

823 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