By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,533 Members | 1,497 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,533 IT Pros & Developers. It's quick & easy.

open select pulldown box only if certain option is clicked

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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
fr*********@whosyourdaddy.com

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #2

P: n/a
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 <fr*********@whosyourdaddy.com> 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
fr*********@whosyourdaddy.com

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!


Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.