Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > open select pulldown box only if certain option is clicked

Reply
Thread Tools

open select pulldown box only if certain option is clicked

 
 
Oskar Wild
Guest
Posts: n/a
 
      08-28-2003
Hello,

how do I code it to display a select (pulldown) box only if the user
has selected a certain option in another pulldown box?

<select name=country>
<OPTION value="France" SELECTED>France
<OPTION value="Spain">Spain
<OPTION value="Portugal">Portugal
</select>

<select name=city>
<OPTION value="Paris" SELECTED>Paris
<OPTION value="Cologne">Cologne
<OPTION value="Rennes">Rennes
</select>

In the example above, the "city" select box should only display if the
user has selected "France" as country...

Another option would be to disable the pulldown box if a certain
option was clicked - how would I do THAT?

thanks a lot!
Ossi
 
Reply With Quote
 
 
 
 
Fred Basset
Guest
Posts: n/a
 
      08-28-2003
Use this script below to perform what you have requested. Change the
names as necessary.

<script type="text/javascript">

function displayCities()
{
var oCountry = document.forms['selectform']['country'];
var oCity = document.forms['selectform']['city'];

if (oCountry.options[oCountry.selectedIndex].value == "France") {
oCity.style.display = 'inline';
} else {
oCity.style.display = 'none';
}
}

</script>

Put this script in the head of your document. The select boxes have been
rewritten slightly. You should always surround attributes (like name)
with double quotes and you should always put a closing </option> tag in
for each one. The main change is the inclusion of an onChange event
which means that when the dropdown value changes it will call the
specified function and check whether it needs to hide or display the
second dropdown.

<form name="selectform">
<select name="country" onChange="displayCities();">
<option value="France" selected>France</option>
<option value="Spain">Spain</option>
<option value="Portugal">Portugal</option>
</select>

<select name="city">
<option value="Paris" selected>Paris</option>
<option value="Cologne">Cologne</option>
<option value="Rennes">Rennes</option>
</select>
</form>

Finally, if you put an onLoad handler into the body tag then when the
document loads for the first time it will check to make sure that the
second dropdown is only displaying when it is meant to.

<body onLoad="displayCities();">

Hope this helps.

Fred Basset
http://www.velocityreviews.com/forums/(E-Mail Removed)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
 
 
 
Oskar Wild
Guest
Posts: n/a
 
      08-28-2003
Fred,

that worked great- THANKS!!

Could you tell me what to do if I would just like to disable the
checkbox if the user would not select "france"?

I would code

oCity.enabled = (oCountry.options[oCountry.selectedIndex].value =
"France");

is this correct?

thanks again
Ossi


Fred Basset <(E-Mail Removed)> wrote:

>Use this script below to perform what you have requested. Change the
>names as necessary.
>
><script type="text/javascript">
>
> function displayCities()
> {
> var oCountry = document.forms['selectform']['country'];
> var oCity = document.forms['selectform']['city'];
>
> if (oCountry.options[oCountry.selectedIndex].value == "France") {
> oCity.style.display = 'inline';
> } else {
> oCity.style.display = 'none';
> }
> }
>
></script>
>
>Put this script in the head of your document. The select boxes have been
>rewritten slightly. You should always surround attributes (like name)
>with double quotes and you should always put a closing </option> tag in
>for each one. The main change is the inclusion of an onChange event
>which means that when the dropdown value changes it will call the
>specified function and check whether it needs to hide or display the
>second dropdown.
>
><form name="selectform">
> <select name="country" onChange="displayCities();">
> <option value="France" selected>France</option>
> <option value="Spain">Spain</option>
> <option value="Portugal">Portugal</option>
> </select>
>
> <select name="city">
> <option value="Paris" selected>Paris</option>
> <option value="Cologne">Cologne</option>
> <option value="Rennes">Rennes</option>
> </select>
></form>
>
>Finally, if you put an onLoad handler into the body tag then when the
>document loads for the first time it will check to make sure that the
>second dropdown is only displaying when it is meant to.
>
><body onLoad="displayCities();">
>
>Hope this helps.
>
>Fred Basset
>(E-Mail Removed)
>
>*** Sent via Developersdex http://www.developersdex.com ***
>Don't just participate in USENET...get rewarded for it!


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Select option pulldown menu and request.form problem .Net Sports ASP General 2 10-27-2009 10:26 AM
programmatically select an option in "select" box in html rvelosoo Javascript 1 08-13-2008 10:53 AM
How to know which option in select field was clicked last? smash2004@gmail.com Javascript 6 10-12-2005 02:03 PM
white out on pulldown options when mouse is over said option Xeno Campanoli Ruby 0 09-10-2005 04:44 PM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments