Jump to content

How do I go about creating a "nested pulldown"?


essaydoctor
 Share

Recommended Posts

I am creating a nifty site using an online website developer called yola.com. I'm adding some HTML coding that I'm putting together. I'm trying to create a "nested pulldown": When a user pulls down the first menu which lists the 50 states of the USA, the second pull down menu becomes auto-populated with all the entities affiliated with that state. How do I go about doing this? So far, I have only 1 pulldown menu, and it contains all 400+ entries. It is not elegant at all and quite ugly. Any help would be greatly appreciated. In the past, I've tried looking at the source code from similar pulldown menus on cars.com (where they have "nested pulldowns" - when you select "Acura" for example, the next pulldown would get populated with "Integra, RL, etc.") as well as viewing the source code for a pulldown on yahoo.com. Basically, my source code below is not elegant. It has all the entries. I'd like to segregate the states with the testing sites. Another words: A pulldown for "States" and another one for "Testing Centers within that state". LessThanSign htmlGreaterThanSignLessThanSign headGreaterThanSignLessThanSign titleGreaterThanSign My PageLessThanSign /titleGreaterThanSignLessThanSign /headGreaterThanSignLessThanSign bodyGreaterThanSignLessThanSign form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"GreaterThanSignLessThanSign div align="center"GreaterThanSignLessThanSign select name="mydropdown"GreaterThanSignLessThanSign option value="PROMETRIC TEST CENTER; 3401 MINNESOTA DRIVE; ANCHORAGE, Alaska, 99503 "GreaterThanSign Alaska: PROMETRIC TEST CENTER; 3401 MINNESOTA DRIVE; ANCHORAGE, AK 99503 LessThanSign /optionGreaterThanSignLessThanSign option value="Prometric Testing Center; 615 E. 82nd Ave Suite B3-4; Anchorage, Alaska, 99518 "GreaterThanSign Alaska: Prometric Testing Center; 615 E. 82nd Ave Suite B3-4; Anchorage, AK 99518 LessThanSign /optionGreaterThanSignLessThanSign option value="PROMETRIC TEST CENTER; 2409 SOUTH 56TH ST CO-LOCATED W/ SYLVAN LEARNING CTR; FORT SMITH, Arkansas, 72903 "GreaterThanSign Arkansas: PROMETRIC TEST CENTER; 2409 SOUTH 56TH ST CO-LOCATED W/ SYLVAN LEARNING CTR; FORT SMITH, AR 72903 LessThanSign /optionGreaterThanSignLessThanSign option value="PROMETRIC TEST CENTER; 8114 Cantrell Road Suite 175; LITTLE ROCK, Arkansas, 72227 "GreaterThanSign Arkansas: PROMETRIC TEST CENTER; 8114 Cantrell Road Suite 175; LITTLE ROCK, AR 72227 LessThanSign /optionGreaterThanSignLessThanSign option value="PROMETRIC TEST CENTER; 520 N CAMINO MERCADO BLVD Suite 9; CASA GRANDE, Arizona, 85122 "GreaterThanSign Arizona: PROMETRIC TEST CENTER;LessThanSign /selectGreaterThanSignLessThanSign /divGreaterThanSignLessThanSign /formGreaterThanSignLessThanSign /bodyGreaterThanSignLessThanSign /htmlGreaterThanSign

<html><head><title>My Page</title></head><body><form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"><div align="center"><select name="mydropdown"><option value="PROMETRIC TEST CENTER;  3401 MINNESOTA DRIVE; ANCHORAGE, Alaska, 99503 ">Alaska: PROMETRIC TEST CENTER;  3401 MINNESOTA DRIVE; ANCHORAGE, AK 99503 </option><option value="Prometric Testing Center; 615 E. 82nd Ave Suite B3-4; Anchorage, Alaska, 99518 ">Alaska: Prometric Testing Center; 615 E. 82nd Ave Suite B3-4; Anchorage, AK 99518 </option><option value="PROMETRIC TEST CENTER; 2409 SOUTH 56TH ST CO-LOCATED W/ SYLVAN LEARNING CTR; FORT SMITH, Arkansas, 72903 ">Arkansas: PROMETRIC TEST CENTER; 2409 SOUTH 56TH ST CO-LOCATED W/ SYLVAN LEARNING CTR; FORT SMITH, AR 72903 </option><option value="PROMETRIC TEST CENTER; 8114 Cantrell Road Suite 175; LITTLE ROCK, Arkansas, 72227 ">Arkansas: PROMETRIC TEST CENTER; 8114 Cantrell Road Suite 175; LITTLE ROCK, AR 72227 </option><option value="PROMETRIC TEST CENTER; 520 N CAMINO MERCADO BLVD Suite 9; CASA GRANDE, Arizona, 85122 ">Arizona: PROMETRIC TEST CENTER;</select></div></form></body></html> 

Link to comment
Share on other sites

There's no "built-in" way to nest a select menu. You could use JavaScript to create something, though. A better way would be to have to separate selects. One for state, one for test centers. The test center select would be populated with options based on the selected index of the state select. When the state is changed, the options in the test center select change to match. If you're using PHP (or other server side language) to retrieve your information from a database, this is easily achieved by sending an AJAX request to PHP in the onchange event, passing the selected index and returning a JSON string containing data you will use to add the new options to the test center select. If you aren't (or can't) using PHP, there's a great write-up here detailing an alternative.

Edited by ShadowMage
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...