用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

select上添加div优化样式

2016-12-13 作者:云代码会员举报

[javascript]代码库

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    #mainsearch_select {
        width: 70px;
        height: 35px;
        float: left;
        position: relative;
    }
    
    #mselect-t {
        width: 70px;
        height: 37px;
        line-height: 38px;
        cursor: pointer;
        margin-left: 5px;
    }
    
    #mselect-t span {
        width: 64px;
        height: 37px;
        float: left;
        display: block;
        color: #000;
    }
    
    #mselect-t i {
        width: 5px;
        height: 3px;
        margin-top: 17px;
        float: left;
        display: block;
        background: url(main_select_ico.png);
    }
    
    #mselect-c {
        width: 68px;
        height: 103px;
        border: solid 1px #ccc;
        position: absolute;
        top: 37px;
        left: 0;
        background: #fff;
        display: none;
    }
    
    #mselect-c li {
        width: 100%;
        height: 25px;
        border-bottom: dotted 1px #ddd;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
        color: #000;
    }
    
    #mselect-c li:last-child {
        border-bottom: none;
    }
    
    #mselect-c li:hover {
        background: #b2e1ff;
        color: #fff;
    }
    
    #mainsearch_btn {
        width: 70px;
        height: 42px;
        float: right;
        overflow: hidden;
    }
    
    #mainsearch_btn input[type=submit] {
        width: 70px;
        height: 42px;
        border: none;
        background: transparent;
        text-indent: -9999em;
    }
    
    #mselect {
        display: none;
    }
    </style>
</head>

<body>
    <div id="mainsearch_select">
        <div id="mselect-t"><span>商品信息</span><i></i></div>
        <ul id="mselect-c">
            <li>商品信息</li>
            <li>进货记录</li>
            <li>销售记录</li>
            <li>库存余量</li>
        </ul>
        <select id="mselect" style="display:none;">
            <option selected>商品信息</option>
            <option>进货记录</option>
            <option>销售记录</option>
            <option>库存余量</option>
        </select>
    </div>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#mselect-c").css("display", "none");
        $("#mselect-t").click(function() {
            if (document.getElementById("mselect-c").style.display == "none") {
                $("#mselect-c").show();
            } else {
                $("#mselect-c").hide();
            }
        });
        $("#mselect-c li").click(function() {
            $("#mselect-t span").text($(this).text());
            var thisindex = $(this).index();
            $("#mselect option").removeAttr("selected").eq(thisindex).attr("selected", "selected");
            $("#mselect-c").hide();
        });
    })
    </script>
</body>

</html>


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。