zoukankan      html  css  js  c++  java
  • 写了一个可以个性化设置的仿<select>标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js">
    
        </script>
        <style>
            .select{
                 100px;
                height: 20px;
                position: relative;
                margin-top: 20px;
            }
            .select_show{
                 inherit;
                height: inherit;
                border: 1px solid gray;
            }
            .select_option{
                 inherit;
                height: inherit;
                border: 1px solid gray;
                border-top: 0;
            }
            .select_option_container{
                 inherit;
                display: none;
                position: absolute;
                z-index: 999;
    
            }
        </style>
    </head>
    <body>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <script>
        $(".select_show").click(function(){
            var optionContainerLeft=0;
            var optionContainerTop=$(this).outerHeight();
            $(this).closest(".select").find(".select_option_container").css("left",optionContainerLeft).css("top",optionContainerTop).show();
        })
        $(".select_option").click(function(){
            $(this).closest(".select_option_container").hide();
            $(this).closest(".select").find(".select_show").html($(this).html());
        })
    
    </script>
    </body>
    </html>
  • 相关阅读:
    在插入一条记录后 取得自动增长ID
    hashtable,dictionary 从原理上说说有什么异同,哪个性能高一些
    单例模式
    聚簇索引与非聚簇索引的区别
    基于SQL SERVER2008的SCCM2007部署
    XML架构下的表结构设置主键
    IE6与IE7下一点样式的区别
    Session丢失原因与解决方案小结
    Python_如何去除字符串里的空格
    Python_让人脑阔疼的编码问题(转)+(整理)
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6694988.html
Copyright © 2011-2022 走看看