Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
key press alert 2 32
Alert after MVC form submitted 1 22
simple html dom php accessing table/cell  values 4 18
Wordpress Only run code if on a certain page 11 22
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

809 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