自己模拟下拉单选框

Posted ybixian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自己模拟下拉单选框相关的知识,希望对你有一定的参考价值。


/**
 * 自己模拟下拉框选项
 * 2018年6月28日16:51:26
 * author: ybixian
 */

function selectModel() {
    var $box = $(‘div.model-select-box‘);
    var $option = $(‘ul.model-select-option‘, $box);
    var $txt = $(‘div.model-select-text‘, $box);
    var speed = 10;
    /*
     * 单击某个下拉列表时,显示当前下拉列表的下拉列表框
     * 并隐藏页面中其他下拉列表
     */
    $txt.click(function (e) {
        $option.not($(this).siblings(‘ul.model-select-option‘)).slideUp(speed, function () {
            int($(this));
        });
        $(this).siblings(‘ul.model-select-option‘).slideToggle(speed, function () {
            int($(this));
        });
        return false;
    });
    //点击选择,关闭其他下拉
    /*
     * 为每个下拉列表框中的选项设置默认选中标识 data-selected
     * 点击下拉列表框中的选项时,将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性,并改变默认选中标识 data-selected
     * 为选项添加 mouseover 事件
     */
    $option.find(‘li‘).each(function (index, element) {
        if ($(this).hasClass(‘seleced‘)) {
            $(this).addClass(‘data-selected‘);
        }
    })
        .mousedown(function () {
            $(this).parent().siblings(‘div.model-select-text‘).text($(this).text())
                .attr(‘data-value‘, $(this).attr(‘data-option‘));

            $option.slideUp(speed, function () {
                int($(this));
            });
            $(this).addClass(‘seleced data-selected‘).siblings(‘li‘).removeClass(‘seleced data-selected‘);
            return false;
        })
        .mouseover(function () {
            $(this).addClass(‘seleced‘).siblings(‘li‘).removeClass(‘seleced‘);
        });
    //点击文档,隐藏所有下拉
    $(document).click(function (e) {
        $option.slideUp(speed, function () {
            int($(this));
        });
    });
    //初始化默认选择
    function int(obj) {
        obj.find(‘li.data-selected‘).addClass(‘seleced‘).siblings(‘li‘).removeClass(‘seleced‘);
    }
}

css

/* 自己模拟下拉框 */
.model-select-box { 
    width: 100%;
    min-width: 200px;
    height: 30px;
    line-height: 28px;
    border: 1px solid #e5e7e9;
    float: left;
    margin-right: 20px;
    text-indent: 5px;
    position: relative;
    border-radius: 4px;
    background-color: #fff;
}
.model-select-text {
    height: 30px;
    border-radius: 4px;
    padding-right: 30px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.model-select-option {
    display: none;
    position: absolute;
    background: #fff;
    width: 100%;
    left: -1px;
    z-index: 99999;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
 }
.model-select-option li {
    height: 22px;
    line-height: 22px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-select-option li.seleced {
    background: #188AE2;
    color: #fff;
}
.model-select-box > i.fa{
    position: absolute;
    right: 9px;
    top: 5px;
}

/* 下拉 end */

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <style>
        body{
            height: 100%;
            min-width: 1200px !important;
        }
    </style>

    <title>外勤管理</title>

    <link rel="stylesheet" type="text/css" href="../../js/plugins/layui/css/layui.css"/>
    <!-- Main Styles -->
    <link rel="stylesheet" href="../../assets/styles/style.css">

    <!-- Material图标样式 -->
    <link rel="stylesheet" href="../../assets/fonts/material-design/css/materialdesignicons.css">

    <!--树状样式-->
    <link rel="stylesheet" href="../../css/bootstrapStyle/bootstrapStyle.css">


    <!--公共样式-->
    <link rel="stylesheet" type="text/css" href="../../css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/icon/iconfont.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_516331_n8pyh8kmlxhqto6r.css">

    <link rel="stylesheet" href="../../css/portal/layerPage/layer-page.css">
    <!-- 扩展页面样式 -->
    <!--<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">-->

</head>

<body>
<div class="model-select-box">
        <div class="model-select-text" data-value="移动项目部">移动项目部</div>
        <i class="fa fa-sort-desc"></i>
        <ul class="model-select-option" style="display: none;">
            <li data-option="广州项目部" class="">广州项目部</li><li data-option="华势项目部" class="">华势项目部</li>
            <li data-option="移动项目部" class="seleced data-selected">移动项目部</li>
        </ul>
</div>

<script>
    // 调用方法
    selectModel();
    
    // 注意,点击事件为"mousedown",和selectModel函数对应
    $(‘.model-select-option>li‘).on(‘mousedown‘,function () {
        alert(‘点击li‘)
    })
</script>
</body>
</html>

以上是关于自己模拟下拉单选框的主要内容,如果未能解决你的问题,请参考以下文章

vue.js实现单选框复选框和下拉框

C#中Windows设计窗怎么实现单选框和省市下拉框联动?

下拉框多选框单选框 通过TagHelper绑定数据

JavaScript---网络编程(11)--DHTML技术演示-单选框/下拉菜单/添加文件

HTML5输入框下拉菜单

JSP——单选框,下拉选框