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. Advertising

  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


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Fred Basset, Aug 28, 2003
    #2
    1. Advertising

  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


    Fred Basset <> 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
    >
    >
    >*** Sent via Developersdex http://www.developersdex.com ***
    >Don't just participate in USENET...get rewarded for it!
     
    Oskar Wild, Aug 28, 2003
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Straatvark
    Replies:
    1
    Views:
    1,508
    Teemu Keiski
    Nov 13, 2003
  2. .Net Sports
    Replies:
    2
    Views:
    826
    Evertjan.
    Oct 27, 2009
  3. Xeno Campanoli
    Replies:
    0
    Views:
    112
    Xeno Campanoli
    Sep 10, 2005
  4. palmiere
    Replies:
    1
    Views:
    451
    Erwin Moller
    Feb 9, 2004
  5. rvelosoo
    Replies:
    1
    Views:
    377
    Bart Van der Donck
    Aug 13, 2008
Loading...

Share This Page