jquery SELECT选中问题

jqueryselectclasshtml

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://cloud.xing-xing.com/jquery.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
    $("div").css({"display":"none"});
    $("#drivers").change(function(e) {
    $("div").css({"display":"none"});
    $("."+this.value.toLowerCase()).css({"display":"block"});
    });
    })
    </script>
    </head>
    <body>
    <select name="Drivers" class="select" id="drivers">
    <option value="Local">本地</option>
    <option value="Ftp" >Ftp</option>
    <option value="Oss" selected="">阿里云Oss</option>
    <option value="Sae">新浪Sae</option>
    <option value="Bcs">百度Bcs</option>
    <option value="Qiniu">七牛</option>
    <option value="Upyun">又拍云Upyun</option>
    </select>
    <div class="local" style="width:200px; height:20px; border:#FF0000 1px solid;">local</div>
    <div class="oss" style="width:200px; height:20px; border:#FF0000 1px solid;">oss</div>
    <div class="ftp" style="width:200px; height:20px; border:#FF0000 1px solid;">ftp</div>
    <div class="sae" style="width:200px; height:20px; border:#FF0000 1px solid;">sae</div>
    <div class="bcs" style="width:200px; height:20px; border:#FF0000 1px solid;">bcs</div>
    </body>
    </html>
      

  2.   

    $(function(){
    $("div").hide();  
    $("#drivers").change(function(e) {
        $("div").hide();
        $("."+$(e).val().toLowerCase()).show();
    });   
    })
      

  3.   


    $(function(){
    $("div").hide();
    $("#drivers").change(function(e) {
        $("div").hide();
        $("."+this.value.toLowerCase()).show();
    });   
    })
      

  4.   


     <script>
            $(function () {
                $("#drivers").change(function () {
                    var css = $("#drivers").val();
                    $("div").each(function () {
                        if($(this).attr("class") == css.toString().toLocaleLowerCase())
                            $(this).css("display", "block");
                        else
                            $(this).css("display", "none");
                    });
                });
            })
        </script>