Web前端开发 select 代码设计

35岁前端开发找工作|web前端开发岗位认知|搜狐前端开发笔试题

第一种,是select这个标签自带的样式,原有的。在不同的浏览器上表现的形式不同。
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>关于select的一些效果</title>
    <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <style type=”text/css”>
        ul {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <select class=”sel1″>
            <option value=”sel”>你好1</option>
            <option value=”sel”>你好2</option>
            <option value=”sel”>你好3</option>
            <option value=”sel”>你好4</option>
        </select>
    </div>
</body>
</html>

第二种,改变select样式,但是下拉效果还是使用原有的 在ie,谷歌,火狐中的表现形式变得相同
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>关于select的一些效果</title>
    <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <style type=”text/css”>
        ul {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        /*select2*/
        .select2 {
            position: relative;
            width: 150px;
            height: 32px;
            overflow: hidden;
        }
        .sel2_text {
            width: 148px;
            height: 30px;
            border: 1px #ddd solid;
            background: #fff;
            overflow: hidden;
            position: relative;
        }
        .sel2_text span {
            width: 130px;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            display: inline-block;
            float: left;
        }
        .sel2_text i {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 11px solid #000;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .sel2 {
            width: 100%;
            height: 100%;
            opacity: 0;
            filter: alpha(opacity=0);
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class=”select2″>
        <div class=”sel2_text”>
            <span>select</span>
            <i></i>
        </div>
        <select class=”sel2″>
            <option value=”sel”>你好1</option>
            <option value=”sel”>你好2</option>
            <option value=”sel”>你好3</option>
            <option value=”sel”>你好4</option>
        </select>
        <script type=”text/javascript”>
            $(“.sel2”).change(function () {
                $(“.sel2_text span”).text($(this).children(‘option:selected’).text());
            });
        </script>
    </div>
</body>
</html>

第三种,在第二种的基础上,使在点击option选项时进行跳转
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发要学英语</title>
    <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <style type=”text/css”>
        ul {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        /*select3*/
        .select3 {
            position: relative;
            width: 150px;
            height: 32px;
            overflow: hidden;
        }
        .sel3_text {
            width: 148px;
            height: 30px;
            border: 1px #ddd solid;
            background: #fff;
            overflow: hidden;
            position: relative;
        }
        .sel3_text span {
            width: 130px;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            display: inline-block;
            float: left;
        }
        .sel3_text i {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 11px solid #000;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .sel3 {
            width: 100%;
            height: 100%;
            opacity: 0;
            filter: alpha(opacity=0);
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class=”select3″>
        <div class=”sel3_text”>
            <span>跳转</span>
            <i></i>
        </div>
        <select class=”sel3″ onchange=”sel3()” id=”sel3″>
            <option value=http://www.baidu.com>你好1</option>
            <option value=http://www.baidu.com>你好2</option>
            <option value=http://www.baidu.com>你好3</option>
            <option value=http://www.baidu.com>你好4</option>
        </select>
        <script type=”text/javascript”>
            function sel3() { location.href = document.getElementById(“sel3”).value; }
        </script>
    </div>
</body>
</html>

第四种,根据select,直接模拟select
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发规范手册</title>
    <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
    <style type=”text/css”>
        ul {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        /*select4*/
        .select4 {}
        .sel4_txt {
            width: 148px;
            height: 30px;
            border: 1px #ddd solid;
            background: #fff;
            position: relative;
        }
        .sel4_txt span {
            width: 130px;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            display: inline-block;
            float: left;
        }
        .sel4_txt i {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 11px solid #000;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .sel4 {
            display: none;
            width: 100%;
            height: auto;
            background: #ddd;
            overflow: hidden;
        }
        .sel4 li {
            width: 100%;
            height: 26px;
            line-height: 26px;
            font-size: 14px;
            color: #8a8a8a;
            text-indent: 10px;
            border-bottom: 1px #f8f8f8 solid;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class=”select4″>
        <div class=”sel4_txt”>
            <span>select选项</span>
            <i></i>
            <ul class=”sel4″>
                <li>你好1</li>
                <li>你好2</li>
                <li>你好3</li>
                <li>你好4</li>
            </ul>
        </div>
        <script type=”text/javascript”>
            $(“.sel4_txt”).click(function () {
                var index = $(this).index();
                $(this).children(“ul”).toggle();
            });
            $(“.sel4 li”).on(“click”, function (e) {
                e.stopPropagation();
                $(“.sel4_txt>span”).text($(this).text());
                $(this).closest(“.sel4”).hide();
            });
        </script>
    </div>
</body>
</html>

中兴前端开发笔试题|ipad 前端开发规范|airbnb前端开发规范

» 本文来自:前端开发者 » 《Web前端开发 select 代码设计》
» 本文链接地址:https://www.rokub.com/4963.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!