Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Chained Drop Down List, Last in Chain Show/Hide a Div?

    Hi Everyone! I would genuinely appreciate some help on this one.

    I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript.

    This is how I'd like it to work:
    -- User selects from DropDown List 1.
    -- DropDown List 2 options appear based on the selection in 1.
    -- User selects from DropDown List 2,
    -- Appropriate div is shown.

    Here's the Javascript I'm using to show/hide a div:

    Code:
    function showDiv(divID)
    {
    var div = document.getElementById(divID);
    div.style.display = ""; //display div
    }
    
    function hideDiv(divID)
    {
    var div = document.getElementById(divID);
    div.style.display = "none"; // hide
    }
    
    function hideAllDivs()
    {
    //Loop through the seclect menu values and hide all
    var courseSelect = document.getElementById("courseSelect");
    for (var i=0; i<=courseSelect.options.length -1; i++)
    {
    hideDiv(courseSelect.options[i].value);
    }
    }
    
    function toggle(showID){
    hideAllDivs(); // Hide all
    showDiv(showID); // Show the one we asked for
    }
    Here's the Javascript for the chained drop down lists:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    
    <script type="text/javascript" defer>
    function cascadeSelect(parent, child){
    var childOptions = child.find('option:not(.static)');
    child.data('options',childOptions);
    
    parent.change(function(){
    childOptions.remove();
    child
    .append(child.data('options').filter('.sub_' + this.value))
    .change();
    })
    
    childOptions.not('.static, .sub_' + parent.val()).remove();
    
    }
    
    $(function(){
    cascadeForm = $('.cascadeTest');
    deptartmentSelect = cascadeForm.find('.deptartmentSelect');
    courseSelect = cascadeForm.find('.courseSelect');
    
    cascadeSelect(deptartmentSelect, courseSelect);
    });
    And lastly, my HTML (simplified)

    Code:
    <form action="#" class="cascadeTest">
    <table>
    <tr>
    <th>Organization:</th>
        <td><select name="deptartmentSelect" class="deptartmentSelect">
            <option value="0">Select a Department</option>
            <option value="1">Dept A</option>
            <option value="2">Dept B</option>
            <option value="3">Dept C</option>
          </select></td>
      </tr>
      <tr>
        <th>Territory:</th>
        <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
            <option value="0" class="static">- Courses -</option>
            <option value="A1" class="sub_1">Course A1</option>
            <option value="B1" class="sub_2">Course B1</option>
            <option value="C1" class="sub_3">Course C1</option>
          </select></td>
      </tr>
    </table>
    </form>
    <div id="A1" style="display:none;">I am Course A1</div>
    <div id="B1" style="display:none;">I am Course B1</div>
    <div id="C1" style="display:none;">I am Course C1</div>
    Thanks again in advance!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    See if this fits your needs.
    Code:
    <html>
    <head>
    <title>Multi Select Boxes</title>
    
    <style type="text/css">
     .courseDiv { display:none; border:1px solid blue; background-Color:lightblue; min-height:300px; }
    </style>
    
    <script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Kiran Pai | http://www.codecoffee.com/ 
    */
    // Modified From: http://javascript.internet.com/forms/multi-value-drop-down-list-2.html
    // Modified extensively again for: http://www.codingforums.com/showthread.php?t=245935
    
    var Course_A= ["CA1|Math",    "CA2|Alegbra",  "CA3|Calculus",    "CA4|Set Theory"];
    var Course_B= ["CB1|Science", "CB2|Physics",  "CB3|Chemistry",   "CC4|Biology"];
    var Course_C= ["CC1|Arts",    "CC2|Painting", "CC3|Photography", "CC4|Laser Imaging"];
    
    function set_course() {
      var select_dept = document.myform.dept;
      var select_course = document.myform.course;
      var selected_dept = select_dept.options[select_dept.selectedIndex].value;
    
      select_course.options.length=0;
      select_course.options[select_course.options.length] = new Option('Select Course','');
      var tarr = [];
      switch (selected_dept) {
    
       case 'Dept_A' :
        for(var i=0; i<Course_A.length; i++) {
         tarr = Course_A[i].split('|');
         select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);
        }
        break;
    
       case 'Dept_B' : 
        for(var i=0; i<Course_B.length; i++) {
         tarr = Course_B[i].split('|');
         select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);
        }
    // Note ability to merge two courses into one department
        for(var i=0; i<Course_C.length; i++) {
         tarr = Course_C[i].split('|');
         select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);
        }
        break;
    
    //   default : alert('Invalid selection'); break;		// un-necessary line
      }
    }
    
    function ShowSelection(flag) {
      var select_dept = document.myform.dept;
      var select_course = document.myform.course;
      var selected_dept = select_dept.options[select_dept.selectedIndex].value;
      var selected_course = select_course.options[select_course.selectedIndex].value;
      if (flag == false) {
        alert('Selection: '+selected_dept+ ' : ' + selected_course);
      } else {
        var sel = document.getElementById('Courses').getElementsByTagName('div');
        for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
        if (selected_course != '') {
          document.getElementById(selected_course).style.display = 'block';
        }
      }
    }
    
    </script>
    </head>
    <body>
    
    <form name="myform" method="POST">
    <table>
     <tr>
      <td>Organization:</td><td>
       <select name="dept" onchange="set_course()">
        <option value="">Select Department</option>
        <option value="Dept_A">Department A</option>
        <option value="Dept_B">Department B</option>
       </select>
      </td>
    
      <td>Territory:</td><td>
       <select name="course" onchange="ShowSelection(true)"
        <option value=""> ------ </option>
       </select>
      </td>
     </tr>
    </table>
    </form>
    
    <!-- for testing purposes
    <button onclick="ShowSelection(false)">Show Selection</button>
    <!-- -->
    
    <div id="Courses">
     <div id="CA1" class="courseDiv">I am Course A1</div>
     <div id="CA2" class="courseDiv">I am Course A2</div>
     <div id="CA3" class="courseDiv">I am Course A3</div>
     <div id="CA4" class="courseDiv">I am Course A4</div>
    
     <div id="CB1" class="courseDiv">I am Course B1</div>
     <div id="CB2" class="courseDiv">I am Course B2</div>
     <div id="CB3" class="courseDiv">I am Course B3</div>
     <div id="CB4" class="courseDiv">I am Course B4</div>
    
     <div id="CC1" class="courseDiv">I am Course C1</div>
     <div id="CC2" class="courseDiv">I am Course C2</div>
     <div id="CC3" class="courseDiv">I am Course C3</div>
     <div id="CC4" class="courseDiv">I am Course C4</div>
    </div>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much
    can i open a div instead of URL ?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by RealIdea View Post
    thank you so much
    can i open a div instead of URL ?
    What do you mean?
    Give an example of where this is to occur.
    I don't see any URL specified in the code I sent.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry .. very sorry
    i want to add one more selection to be 3 levels of choosen

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by RealIdea View Post
    sorry .. very sorry
    i want to add one more selection to be 3 levels of choosen

    You need to give an example of what it is that you are trying to do.
    My personal mind reading skills suck!

    What is the 3rd level supposed to represent?
    What have you tried on your own so far?


  •  

    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
    •