HTML ui模仿select

HTML ui模仿select

  • 1 HTML
  • 2 CSS3
  • 3 JavaScript
  • 4 效果

1 HTML


<html>

<head>
    <title>ul模拟selecttitle>
    <script type="text/javascript" src="./jquery/jquery-3.5.1.js">script>
    <link rel="stylesheet" href="./css/demo.css">
head>

<body>

    <div class="select-style-box">
        <input type="text" value="请选择..." readonly="readonly">
        <ul class="select_ul">
            <li>选项一li>
            <li>选项二li>
            <li>选项三li>
            <li>选项四li>
            <li>选项五li>
            <li>选项六li>
            <li>选项七li>
            <li>选项八li>
            <li>选项九li>
        ul>
    div>
    
body>

<script type="text/javascript" src="./demo.js">script>

html>

2 CSS3

.select-style-box {
    padding: 0;
    width: 300px;
    margin: 10px;
    font-size: 12px;
    position: relative;
}

.select-style-box input {
    width: 100%;
    height: 25px;
    display: block;
    cursor: pointer;
    line-height: 25px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 20px;
    border: 1px solid #ccc;
}

.select-style-box ul {
    left: 0px;
    top: 28px;
    margin: 0px;
    padding: 0px;
    display: none;
    width: 330px;
    z-index: 99999;
    overflow: hidden;
    position: absolute;
    background: #fff;
    background: #ebebeb;
    list-style-type: none;
    border: 1px solid #ccc;
}

.select-style-box ul li {
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 30px;
    display: block;
    cursor: pointer;
    overflow: hidden;
    line-height: 30px;
    padding-left: 5px;
    list-style-type: none;
}

.hover {
    background: #ccc;
}

3 JavaScript

$(document).ready(function() { 
    $(".select-style-box input").click(function() {  
        var input = $(this);  
        var ul = $(this).parent().find("ul");  
        if (ul.css("display") == "none") {   
            if (ul.height() > 200) {
                ul.css({ height: "200" + "px", "overflow-y": "scroll" });
            };   
            ul.show();
            ul.hover(function() {}, function() {
                ul.hide();
            });
            ul.find("li").click(function() {
                input.val($(this).text());
                ul.hide();
            }).hover(function() {
                $(this).addClass("hover");
            }, function() {
                $(this).removeClass("hover");
            });   
        } else {   
            ul.hide();   
        } 
    });
});

4 效果

HTML ui模仿select_第1张图片

你可能感兴趣的:(前端)