...

View Full Version : Select Menu influencing other select menus.



shank888
05-11-2007, 10: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:




<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, 02: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


<option>Alberta</option>
to

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

then try this


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


Element.show("province-canada");
and

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, 01:48 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


<option>Alberta</option>
to

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

then try this


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


Element.show("province-canada");
and

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum