open select pulldown box only if certain option is clicked

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Oskar Wild
    #1

    open select pulldown box only if certain option is clicked

    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">S pain
    <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
    Tags: None
    • Fred Basset
      #2
      Re: open select pulldown box only if certain option is clicked

      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.optio ns[oCountry.select edIndex].value == "France") {
      oCity.style.dis play = 'inline';
      } else {
      oCity.style.dis play = '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="selectfor m">
      <select name="country" onChange="displ ayCities();">
      <option value="France" selected>France </option>
      <option value="Spain">S pain</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="display Cities();">

      Hope this helps.

      Fred Basset
      fred.basset@who syourdaddy.com

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

        Comment

        • Oskar Wild
          #3
          Re: open select pulldown box only if certain option is clicked

          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.optio ns[oCountry.select edIndex].value =
          "France");

          is this correct?

          thanks again
          Ossi


          Fred Basset <fred.basset@wh osyourdaddy.com > wrote:
          [color=blue]
          >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.optio ns[oCountry.select edIndex].value == "France") {
          > oCity.style.dis play = 'inline';
          > } else {
          > oCity.style.dis play = '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="selectfor m">
          > <select name="country" onChange="displ ayCities();">
          > <option value="France" selected>France </option>
          > <option value="Spain">S pain</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="display Cities();">
          >
          >Hope this helps.
          >
          >Fred Basset
          >fred.basset@wh osyourdaddy.com
          >
          >*** Sent via Developersdex http://www.developersdex.com ***
          >Don't just participate in USENET...get rewarded for it![/color]

            Comment

            Previous template Next
            Working...