<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery模拟select下拉框多选和单选插件</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
html{
/*height: 100%;*/
}
body{
padding: 100px;
/*height: 100%;*/
}
::-webkit-scrollbar
{
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ebebeb;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 32px;
background-color: #ccc;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 32px;
background-color: #ccc;
-webkit-border-radius: 4px;
}
ul,li{padding: 0;margin: 0}
.mySelect{
position: relative;
}
.mySelect .inputWrap{
width:100%;
min-height: 40px;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
cursor: pointer;
}
.mySelect ul{
padding:0 5px ;
margin: 0;
padding-right: 35px;
}
.mySelect ul,li{
list-style: none;
}
.mySelect li{
display: inline-block;
background: #eaeaea;
padding: 5px;
margin: 5px 5px 5px 0;
border-radius: 5px;
}
.mySelect .fa-close{
cursor: pointer;
}
.mySelect .fa-close:hover{
color: #237eff;
}
.mySelect .mySelect-option{
width: 100%;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: scroll;
position: absolute;
height: 0;
opacity: 0;
}
.mySelect .mySelect-option div{
padding: 10px;
}
.mySelect .inputWrap>i{
position: absolute;
padding: 13px;
right: 0;
top: 0;
}
.mySelect-option div{
cursor: pointer;
border-bottom: 1px solid #e7e7e7;
margin: 5px;
}
.mySelect-option div i{
float: right;
color: #ffffff;
}
.mySelect-option div.selected{
background: #237eff;
color: #ffffff;
border-radius: 5px;
}
.mySelect-option div:hover{
/*background: #9ec6ff;*/
color: #9ec6ff;
border-bottom: 1px solid #9ec6ff;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div style="float: left;position: relative"> 多选 </div>
<div id="mySelect" class="mySelect" style="width: 250px;float: left"></div>
<div style="float: left;position: relative"> 单选 </div>
<div id="mySelect2" class="mySelect" style="width: 250px;float: left;margin-left: 10px"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/select.js"></script>
<script type="text/javascript">
$(function(){
var mySelect= $("#mySelect").mySelect({
mult:true,//true为多选,false为单选
option:[//选项数据
{label:"选项1",value:0},
{label:"选项2",value:1},
{label:"选项3",value:2},
{label:"选项4",value:3},
{label:"选项5",value:4},
{label:"选项6",value:5}
],
onChange:function(res){//选择框值变化返回结果
console.log(res)
}
});
mySelect.setResult(["1","2"]);
var mySelect2= $("#mySelect2").mySelect({
mult:false,
option:[
{label:"选项1",value:0},
{label:"选项2",value:1},
{label:"选项3",value:2},
{label:"选项4",value:3},
{label:"选项5",value:4},
{label:"选项6",value:5}
],
onChange:function(res){
console.log(res)
}
});
mySelect2.setResult(3);
})
</script>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery模拟select下拉框多选和单选插件.zip
版权申诉
76 浏览量
2023-09-22
00:14:36
上传
评论
收藏 359KB ZIP 举报
jQuery模拟select下拉框多选和单选插件.zip （8个子文件） 
js 
select.js 7KB jquery.min.js 91KB css font-awesome.min.css 28KB
index.html 4KB fonts fontawesome-webfont.eot 73KB fontawesome-webfont.woff 87KB fontawesome-webfont.woff2 69KB fontawesome-webfont.ttf 147KB资源评论
