自己模拟下拉单选框


/**
 * 自己模拟下拉框选项
 * 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>

原文地址:https://www.cnblogs.com/ybixian/p/9328252.html

时间: 2024-11-02 19:29:46

自己模拟下拉单选框的相关文章

[js开源组件开发]模拟下拉选项框select

模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://www.lovewebgames.com/jsmodule/select.html 源码查看下载请点击这里https://github.com/tianxiangbing/select 调用示例 <select name="select" id="select"&g

JSP——单选框,下拉选框

单选框: 性别:男<input type="radio" name="sex" value="0" onclick="show();">女<input type="radio" name="sex" value="1" checked onclick="hidd();" 1.在Html的空间中的input标签中有type属性,将该

css模拟下拉框,vue获取双向绑定的值

原生的下拉框用vue获取值双向绑定简直不要太好用,Duang的一下就行了 <div id="datePrice"> <select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"> <option v-for="item in dateList" v-bind:valu

div模拟下拉框

1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e = e || window.event; var dom = e.srcElement || e.target; if (dom.id != "divList"  && document.getElementById("divList").style.

模拟下拉框

//模拟下拉框$(".Js_dropMod").each(function(){        var _this=$(this)            //_this.find(".Js_hiddenVal").val("")            var curObj=_this.find(".Js_curVal");            if(curObj.find("input:text").le

CSS自定义select下拉选择框的样式(不用其他标签模拟)

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5

bootstrap-表单控件——下拉选择框select元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--下拉选择框select元</title>     <!-

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =

下拉选择框select的纯CSS替代方案

这篇教程中,我将给大家展示表单元素下拉选择框select的CSS替代方案.该方法采用css来实现,看上去非常简单.我们用radio标签列表来模拟下拉列表,选择一个radio可以很好的模拟出select中选择一个元素的效果. 一:HTML 下面是我们在form表单里面用到的html代码: .代码 <fieldset class="radio-container"> <div class="radio-options"> <div clas