带多选框的下拉列表

最新推荐文章于 2024-06-11 16:39:30 发布

棠梨染青衣

最新推荐文章于 2024-06-11 16:39:30 发布

阅读量2w

点赞数 3

分类专栏： JavaScrip html jquery css 文章标签：多选框

本文链接：https://blog.csdn.net/cx8218/article/details/81328608

版权

html 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScrip

9 篇文章 1 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

之前想写一个带多选框的下拉列表，然后找相关的内容，发现大多都是用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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>请选择选项</li>
            <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容一</li>
            <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容二</li>
            <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>选项内容三</li>
            <li><i class="icon iconfont icon-duoxuankuang">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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，就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来，有哪位大神知道这个怎么做啊!

棠梨染青衣

关注

3
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
带多选框的下拉列表

之前想写一个带多选框的下拉列表，然后找相关的内容，发现大多都是用select写的，这种是默认的下拉列表样式，但有时候需要自己来写样式，这样用select就不合适了。然后我就在csdn中无意间发现了一位博主（codingNoob，在此声明一下，他写了很多文章都不错，我还关注了！）是用li写的，只是没有多选框，然后我就用了一些他的代码，在加上自己的代码。&lt;!DOCTYPE html&g...
复制链接

扫一扫

专栏目录