大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。
然后我就在csdn中无意间发现了一位博主(codingNoob,在此声明一下,他写了很多文章都不错,我还关注了!)是用li写的,只是没有多选框,然后我就用了一些他的代码,在加上自己的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body{padding:30px;font-family: "微软雅黑";}
li{list-style: none;}
*{padding:0;margin:0;}
#selector{
position:relative;
height:30px;
width:510px;
margin-left: 100px;
margin-top: 100px;
font-size:13px;
line-height:30px;
text-align:left;
user-select:none;
}
#selector select{display:none;}
#selector .arrow{
position:absolute;right:5px;top:12px;display:block;height:0;width:0;
border-top:8px solid lightgreen;border-right:5px solid transparent;
border-left:5px solid transparent;
}
#selector .mr-selector{
display:block;height:30px;width:500px;
padding-left:10px;border:1px solid lightgreen;
cursor:default;
overflow: hidden;
}
#selector .select{display:none;width:510px;margin-top:-1px;border:1px solid lightgreen;}
#selector .select li{height:30px;line-height:30px;padding-left:10px;}
</style>
<link rel="stylesheet" href="xuankuang/iconfont.css" />
<link rel="stylesheet" href="xuankuang/demo.css" />
<script src="js/jquery-1.11.0.min.js"></script>
<title>带多选框的下拉列表</title>
</head>
<body>
<div id="selector">
<span class="mr-selector">请选择选项</span>
<span class="arrow"></span>
<ul class="select">
<li><i id="ki1" class="icon iconfont icon-duoxuankuang"> </i>请选择选项</li>
<li><i class="icon iconfont icon-duoxuankuang"> </i>选项内容一</li>
<li><i class="icon iconfont icon-duoxuankuang"> </i>选项内容二</li>
<li><i class="icon iconfont icon-duoxuankuang"> </i>选项内容三</li>
<li><i class="icon iconfont icon-duoxuankuang"> </i>选项内容四</li>
</ul>
</div>
<script>
(function(){
var selector = $("#selector");
var select = $("#selector .select"); //模拟select的ul选项
var mrSelector = $("#selector .mr-selector");
var li = $("#selector .select li"); //li选项
selector.click(function(eve){
eve.stopPropagation(); //阻止冒泡避免点击后消失
});
mrSelector.click(function(){
select.toggle();
});
li.click(function(eve){
var ttt = $(mrSelector).text();
var index = $(this).index();
eee = $(this).find('i').attr("class");
if(eee=="icon iconfont icon-duoxuankuang"){
$(this).find('i').attr("class","icon iconfont icon-duoxuankuang2");
if(index==0){
var text = $(this).text();
mrSelector.text(ttt);
}else if(index!=0){
var text = ttt+$(this).text();
mrSelector.text(text);
}
}else if(eee=="icon iconfont icon-duoxuankuang2"){
$(this).find('i').attr("class","icon iconfont icon-duoxuankuang");
}
});
$("body").click(function(){
select.hide();
});
}());
</script>
</body>
</html>
1、首先是下拉列表的样式:
2、然后我自己添加了多选框,可以点击选中,这个多选框是用了阿里巴巴矢量图库的图标,这个不错,有很多矢量图,可以选择然后加入购物车生成代码,很方便!
3、还有点击就会在上面的框里显示选中的一项的内容。但是这个有一个bug,就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来,有哪位大神知道这个怎么做啊!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/203969.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...