自己模拟下拉单选框
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>以上是关于自己模拟下拉单选框的主要内容，如果未能解决你的问题，请参考以下文章