open select pulldown box only if certain option is clicked

Oskar Wild · Aug 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

Fred Basset · Aug 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
(e-mail address removed)

Oskar Wild · Aug 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

action_page.php form	2	Oct 25, 2020
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Select option pulldown menu and request.form problem	2	Oct 26, 2009
How to make an input box enable for only past dates and for the startdate if it falls in the current month?	5	Jun 12, 2023
Woocommerce Product Add-ons - Auto-select first option	1	Apr 15, 2016
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Onmouseup in select box affects scrollbars	1	Nov 30, 2007
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

open select pulldown box only if certain option is clicked

Oskar Wild

Fred Basset

Oskar Wild

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads