open select pulldown box only if certain option is clicked

Discussion in 'Javascript' started by Oskar Wild, Aug 28, 2003.

  1. Oskar Wild

    Oskar Wild Guest

    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
     
    Oskar Wild, Aug 28, 2003
    #1
    1. Advertisements

  2. Oskar Wild

    Fred Basset Guest

    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
     
    Fred Basset, Aug 28, 2003
    #2
    1. Advertisements

  3. Oskar Wild

    Oskar Wild Guest

    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
     
    Oskar Wild, Aug 28, 2003
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.