Select Menu influencing other select menus.

shank888 · 05-11-2007, 09:41 PM

I am trying to create a select menu that will influence other select menus in my script. I hope to have a list of countries where i can select a country, then depending on what country i select I'll be displaying a list of states/ provinces, then with those i'll be able to have a city selection list. Currently I am working just on the the country and states. I hope if i can get that done i'll under stand the rest. well anyways here is my code please tell me what i am doing wrong and help me fix this:

Code:

<html>
  <head>
<script type='text/javascript'>
		Event.observe($("country"), "change"; function() {
			if (onchange(country) == "Canada")
				$("province-canada").show();
			else
				$("province-canada").hide();
			if (onchange(country) == "United States")
					$("province-us").show();
			else
				$("province-us").hide();
		});
</script>
  </head>

  <body>
    <form>
<select id='country' onchange='country'>
	<option> Canada </option>
	<option> United States </option>
</select>
	  
 <select id="province-canada">
          <option>Alberta</option>
          <option>British Columbia</option>
          <option>Ontario</option>
        </select>

    <select id="province-us">
          <option>Ohio</option>
          <option>Michigan</option>
          <option>Kentucky</option>
        </select>
		
    </form>  
  </body>
</html>

cyberlogi · 05-12-2007, 01:08 AM

Well, first, i'm not sure what your "onchange(country)" function does. It would make more sense to use Prototype's built in "$F" function to find the value of the options. To start, change your options from

Code:

<option>Alberta</option>

to

Code:

<option value="Alberta">Alberta</option>

then try this

Code:

Event.observe("country", "change"; function(e) {
	if ($F(country) == "Canada") {
		$("province-canada").show();
	}
	else {
		$("province-canada").hide();
	}

	if ($F(country) == "United States") {
		$("province-us").show();
	}
	else {
		$("province-us").hide();
	}
});

I'm not sure if the Prototype guys changed their design, but $ Function didn't used to attach Functions to the element. Before v. 1.5.1 you need to do

Code:

Element.show("province-canada");

and

Code:

Element.hide("province-canada");

If you are going to have a lot of hidden province elements, you will probably want to re-architect your code without a ton of if/else statements. If you attach a class to the hidden selects, like 'hidden' that has the style 'display:none', and use another class list 'show' to override the display. Then you can use document.getElementByClassName('show', parentElement); to quickly find the currently visible select and hide it. Then you just need to use a good naming schema to map the selected country to the province id to grab the select to show.

shank888 · 05-13-2007, 12:48 AM

Quote:

Originally Posted by cyberlogi

Well, first, i'm not sure what your "onchange(country)" function does. It would make more sense to use Prototype's built in "$F" function to find the value of the options. To start, change your options from

Code:

<option>Alberta</option>

to

Code:

<option value="Alberta">Alberta</option>

then try this

Code:

Event.observe("country", "change"; function(e) {
	if ($F(country) == "Canada") {
		$("province-canada").show();
	}
	else {
		$("province-canada").hide();
	}

	if ($F(country) == "United States") {
		$("province-us").show();
	}
	else {
		$("province-us").hide();
	}
});

I'm not sure if the Prototype guys changed their design, but $ Function didn't used to attach Functions to the element. Before v. 1.5.1 you need to do

Code:

Element.show("province-canada");

and

Code:

Element.hide("province-canada");

If you are going to have a lot of hidden province elements, you will probably want to re-architect your code without a ton of if/else statements. If you attach a class to the hidden selects, like 'hidden' that has the style 'display:none', and use another class list 'show' to override the display. Then you can use document.getElementByClassName('show', parentElement); to quickly find the currently visible select and hide it. Then you just need to use a good naming schema to map the selected country to the province id to grab the select to show.

Everything will be hidden exept the provinces / states for the selected country. I was wanting to make somthing like the search on zorpia.com or... http://www.pinkbike.com/photo/ for the photos. but I am really new to java script so I don't under stand much. I thought origianlly I can just do onchange function of the country and then it'll change the province/ state