JavaScript: dynamic dropdowns, various questions reg.. any help great!

Discussion in 'OT Technology' started by Fishbait, Feb 23, 2004.

  1. Fishbait

    Fishbait Guest

    hello,

    i have a few quick questions.. i don't really know anything much about javascript
    but i know what i need this page to do. can anyone assist me? i've copied this
    code from the "ask felgall" computer help website and modified a bit to help move towards what i need.

    1) on page load need to be able to 'set' the value for a parent dropdown and have
    it run the SetOptions function for its child. dynamically... currently its only
    doing it with the 'onChange' event - but i need to be able to set all, just on
    initial page load.

    2) is there a way using the 'new Option' part of the function i can set the
    'selected' value for the dropdown and/or the 'disabled' value for the dropdown?

    3) how can i make the 'var selbox = document.myform.opt1_2;' part of the script
    dynamic so it knows which child to fill values for based off of which parent is
    selected?? ie; opt6_1 would fill values for child opt6_2...

    (all of my values for parent child will be pulled from the database. i'll build
    the selbox.options from the database values on initial page load)

    any help would be MOST appreciated!!!

    questions, comments, concerns??

    :wavey:

    Code:
    <script language="JavaScript">
    function setOptions(chosen) {
      var selbox = document.myform.opt1_2;
       
      selbox.options.length = 1;
      if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
       
      }
      if (chosen == "1") {
        selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
      }
      if (chosen == "2") {
        selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
      }
      if (chosen == "3") {
        selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
      }
    }
    </script>
    
    <form name="myform">
      <div align="center"> 
        <select name="opt1_1" size="1" onchange="setOptions(document.myform.opt1_1.options[document.myform.opt1_1.selectedIndex].value);">
          <option value=" " selected="selected"> </option>
          <option value="1">First Choice</option>
          <option value="2">Second Choice</option>
          <option value="3">Third Choice</option>
        </select>
        <br>
        <br>
        <select name="opt1_2" size="1">
          <option value=" " selected="selected">Please select one of the options above first</option>
        </select>
      <hr>
        <select name="opt2_1" size="1" onchange="setOptions(document.myform.opt2_1.options[document.myform.opt2_1.selectedIndex].value);">
          <option value=" " selected="selected"> </option>
          <option value="1">First Choice</option>
          <option value="2">Second Choice</option>
          <option value="3">Third Choice</option>
        </select>
        <br>
        <br>
        <select name="opt2_2" size="1">
          <option value=" " selected="selected">Please select one of the options above first</option>
        </select>
      <br>
      </div>
    </form>
    
     

Share This Page