www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Multiple Selects with Multiple Div Toggles

  1. #1
    Join Date
    Feb 2010
    Posts
    15

    resolved [RESOLVED] Multiple Selects with Multiple Div Toggles

    Problem: This is essentially for a model number decoder. Several selection boxes full of coded information in a left column, decoded items appearing in right column. The 'decoded' divs will only show up when their coded counterparts are selected in the dropdown. The main problem is that I know nothing of Javascript.

    I have cobbled together enough stuff to get the "select box 1" to toggle the corresponding div, but have no clue how to get the next in series to toggle the next div.

    CSS:
    HTML Code:
    .col1 {
    float:left;
    width:300px;
    }
    
    .col2{
    float:left;
    width:200px;
    }
    Script:
    HTML Code:
    function show(obj) {
      no = obj.options[obj.selectedIndex].value;
      count = obj.options.length;
      for(i=1;i<=count;i++)
        document.getElementById('Unit'+i).style.display = 'none';
      if(no>0)
        document.getElementById('Unit'+no).style.display = 'block';
    }
    Body HTML:
    HTML Code:
    <div class="nomencol1">
    <form name="nomenclature">
    <!-- select box 1 -->
    <p>
    <select onChange="show(this)">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    </select>
    </p>
    <!-- select box 2 -->
    <p>
    <select onChange="show(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    </form>
    </p>
    </div>
    
    <div class="nomencol2">
    <!-- decoded sect 1 -->
    <p>
    <div id="Unit1" style="display:none">Unit Type 1</div>
    <div id="Unit2" style="display:none">Unit Type 2</div>
    <div id="Unit3" style="display:none">Unit Type 3</div>
    </p>
    <!-- decoded sect 2 -->
    <p>
    <div id="Size1" style="display:none">Small</div>
    <div id="Size2" style="display:none">Medium</div>
    <div id="Size3" style="display:none">Large</div>
    </p>
    </div>
    There will ultimately be 14 select drop downs, each relating to a set of decoded divs (the final may end up being a set of checkboxes, but I figure the principle is the same for those, right?).

    I am going to guess that I'm not defining enough variables or something in the Javascript, but I'm at a total n00b loss, so please be gentle, and thanks in advance!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Question More information please ...

    Do the select boxes relate (depend upon) to each other or are they just independent selections to come to a specific model requirement?
    How many options per each of the 14 or so drop-down select boxes?
    What are the descriptions associated with the different DD boxes?
    What's supposed to happen when the information is submitted to somewhere?

  3. #3
    Join Date
    Feb 2010
    Posts
    15
    No, the select boxes are all independent of one another.
    Each select box will have a different number of options…the largest has 31 options.
    Descriptions for the dropdown boxes will include unit type, size, configuration, color, control.
    As far as submission, it's really unnecessary since it's decoding on the fly. Maybe it'll just pop up a printable page or something.
    Thanks for quick response!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Lightbulb Consider these changes ...

    Try this as a start ...
    Code:
    <html>
    <head>
    <title>Model Decoding</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1065745#post1065745
    
    function show(obj) {
      var selArray = document.getElementsByTagName('select');
      var str = '';
      for (var i=0; i<selArray.length; i++) { str += selArray[i].value+'-'; }
    //  alert(str);
      document.getElementById('Units').innerHTML = str;
    }
    
    </script>
    <style type="text/css">
    .col1 {
    	float:left;
    	width:300px;
    }
    .col2{
    	float:left;
    	width:200px;
    }
    
    </style>
    </head>
    <body>
    <div class="nomencol1">
    <form name="nomenclature">
    <!-- select box 1 -->
    <p>
    <select onchange="show(this)">
     <option value="">Select</option>
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
    </select>
    </p>
    <!-- select box 2 -->
    <p>
    <select onchange="show(this)">
     <option value="">Select</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
    </select>
    <!-- select box 3 -->
    <p>
    <select onchange="show(this)">
     <option value="">Select</option>
     <option value="a">a</option>
     <option value="b">b</option>
     <option value="c">c</option>
     <option value="d">d</option>
     <option value="e">e</option>
    </select>
    <!-- select box 4 -->
    <p>
    <select onchange="show(this)">
     <option value="">Select</option>
     <option value="i">i</option>
     <option value="ii">ii</option>
     <option value="iii">iii</option>
     <option value="iv">iv</option>
     <option value="v">v</option>
    </select>
    </form>
    </p>
    </div>
    
    <div class="nomencol2">
    <!-- decoded sections -->
    <p>
    <div id="Units"></div>
    </p>
    </div>
    </body>
    </html>
    Good Luck!

  5. #5
    Join Date
    Feb 2010
    Posts
    15
    Perfect! I replaced the value+'-' with value+'</br>' because I need it to read vertically (limited on horizontal space). Would it be better to do something with a <p> tag? I ecstatically thank you for your assistance, and mention that you brought up an interesting point in your earlier post.

    Regarding making the dropdowns dependent, If I someday wanted to make a couple of them dependent on the choice made in the first box, is that terribly difficult to do?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Talking Ok

    Comments in red below ...
    Quote Originally Posted by thermanlee View Post
    Perfect! I replaced the value+'-' with value+'</br>' because I need it to read vertically (limited on horizontal space). Would it be better to do something with a <p> tag?

    Doesn't matter, as it should be whatever fits your needs.

    I ecstatically thank you for your assistance, and mention that you brought up an interesting point in your earlier post.

    What point was that?

    Regarding making the dropdowns dependent, If I someday wanted to make a couple of them dependent on the choice made in the first box, is that terribly difficult to do?

    Sort of depends. Can be easy or hard ... would need to see the requirements.
    Anyway, you're most welcome.
    Glad I was able to help so far.
    Good Luck!

  7. #7
    Join Date
    Feb 2010
    Posts
    15
    The point was that of making them dependent on one another. It may be helpful to allow the user to only have access to certain options. Let me get the rest of this part done, and I'll repost the code in a new thread. Thanks again for all of your help so far!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles