Question

我有2个jQuery下拉菜单。第二次下拉的内容取决于从第一次下拉中选择的值。

标题标记

中的脚本示例

<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>

我想要做的是显示一个包含每个选项信息的div。我缺乏javascript和jQuery的经验，所以请详细解释，提前谢谢。

Answer 1

这应该让你开始。

<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>

显示每个下拉选项的信息

1 个答案: