display info for each drop down option

I have 2 jQuery drop down menus. The content of the second drop down is dependent on the value chosen from the first.

The code is on this link http://jsfiddle.net/5tmwg/

sample of the script in the header tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer="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');
        orgSelect = cascadeForm.find('.orgSelect');
        terrSelect = cascadeForm.find('.terrSelect');
        locSelect = cascadeForm.find('.locSelect');

        cascadeSelect(orgSelect, terrSelect);
        cascadeSelect(terrSelect, locSelect);
    });
</script>

What I want to do is display a div that has info on each option. I lack experience in javascript and jQuery so please explain in details, thanks in advance.

Answers


This should get you started.

<html>
  <head>
    <title></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript" defer="defer">
            //Function that handles displaying the details about the organization
            function orgDetails(){
                var org = $("#org").attr("value");//get user selection from form
                var div1 = $("#div1");//the div to display info
               //determine what to display in your div1 
               switch(org)
                {
                case "1":
                  div1.html("this is all about organization 1");//output the info
                  break;
                case "2":
                  div1.html("<p>this is all about organization 2</p>");
                  break;
                case "3":
                  div1.html("<b>this</b> is all about organization 3");
                  break;
                default:
                  div1.html("<font color='red'>Select Organization</font>");
                }
                $("#div2").fadeOut(300);//if territory div is set, hide it
                div1.fadeIn(300);//if div1 has already been hidden, unhide it.
            }

            //Function that handles displaying the details about the territory
            function TerritoryDetails(){
                var terr = $("#terrSelect").attr("value");
                var div = $("#div2");
                div.fadeIn(300);
                $("#div1").slideUp(300);//hide organization (optional)
               switch(terr)
                {
                case "1":
                  div.html("this is all about Territory 1");
                  break;
                case "2":
                  div.html("this is all about Territory 2");
                  break;
                case "3":
                  div.html("this is all about Territory 3");
                  break;
                case "4":
                  div.html("this is all about Territory 4");
                  break;
                case "5":
                  div.html("this is all about Territory 5");
                  break;
                case "6":
                  div.html("this is all about Territory 6");
                  break;
                case "7":
                  div.html("this is all about Territory 7");
                  break;
                default:
                  div.html("Select Territory");
                }
            }



            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');
                orgSelect = cascadeForm.find('.orgSelect');
                terrSelect = cascadeForm.find('.terrSelect');
                locSelect = cascadeForm.find('.locSelect');

                cascadeSelect(orgSelect, terrSelect);
                cascadeSelect(terrSelect, locSelect);
            });
        </script>
    </head>
    <body>
        <form action="#" class="cascadeTest">
            <table>
                <tr>
                    <th>Organization:</th>
                    <td>
                        <!--added an onchange event listener to call our function when the user has selected an option-->
                        <select name="orgSelect" id="org" class="orgSelect" onchange="javascript:orgDetails();">
                            <option value="0">Select a Category</option>
                            <option value="1">Cat1</option>
                            <option value="2">Cat2</option>
                            <option value="3">Cat3</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>Territory:</th>
                    <td>
                         <!--added an onchange event listener to call our function when the user has selected an option-->
                        <select name="terrSelect" class="terrSelect" id="terrSelect" onchange="javascript:TerritoryDetails();">
                            <option value="0" class="static">- Select a Product-</option>
                            <option value="1" class="sub_1">Product 1</option>
                            <option value="2" class="sub_1">Product 2</option>
                            <option value="3" class="sub_2">Product 3</option>
                            <option value="4" class="sub_2">Product 4</option>
                            <option value="5" class="sub_3">Product 5</option>
                            <option value="6" class="sub_3">Product 6</option>
                            <option value="7" class="sub_3">Product 7</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
                <div id="div1">
                    <p></p>
                </div>
                <div id="div2">
                    <p></p>
                </div>
    </body>
    </html>​​​​​

Need Your Help

Swift functions

ios function swift println

I am learning Swift and I got problem with understanding how functions work.

C# memory profile

c# memory profile

I'm trying to perform some memory profiling on an applications that is accumulating large amounts of memory.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.