essaydoctor Posted February 27, 2012 Share Posted February 27, 2012 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 More sharing options...
ShadowMage Posted February 27, 2012 Share Posted February 27, 2012 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.