带多选框的下拉列表「建议收藏」

带多选框的下拉列表「建议收藏」之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。然后我就在csdn中无意间发现了一位博主(codingNoob,在此声明一下,他写了很多文章都不错,我还关注了!)是用li写的,只是没有多选框,然后我就用了一些他的代码,在加上自己的代码。<!DOCTYPEhtml&g…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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">&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>

Jetbrains全家桶1年46,售后保障稳定

1、首先是下拉列表的样式:

带多选框的下拉列表「建议收藏」

2、然后我自己添加了多选框,可以点击选中,这个多选框是用了阿里巴巴矢量图库的图标,这个不错,有很多矢量图,可以选择然后加入购物车生成代码,很方便!

带多选框的下拉列表「建议收藏」

3、还有点击就会在上面的框里显示选中的一项的内容。但是这个有一个bug,就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来,有哪位大神知道这个怎么做啊!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/203969.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • WebStorm常用快捷键(Mac版)

    WebStorm常用快捷键(Mac版)⌘——Command⌃——Control⌥——alt⇧——Shift⇪——CapsLockfn——功能键就是fn编辑Command+alt+T用(if..else,try..catch,for,etc.)包住Command+/注释/取消注释的行注释Command+alt+/注释/取消注释与块注释alt+↑向上选取代码块alt+↓向下选取代码块Command+alt+L格式化代码tab,shift+tab调整缩进Control+alt+I快

  • qt容器类_下面属于容器类的是

    qt容器类_下面属于容器类的是C++中容器类是属于标准模板库中的内容,有必要回顾下标准模板库。STL=StandardTemplateLibrary,标准模板库,惠普实验室开发的一系列软件的统称。从根本上说,STL是一些“容器”的集合,这些“容器”有list,vector,set,map等,STL也是算法和其他一些组件的集合。STL被内建在编译系统之内。 在C++标准中,STL被组织为下面的

  • document.all的详细解释(document.all基本上所有浏览器可用!)

    document.all的详细解释(document.all基本上所有浏览器可用!)从何而来从IE4开始IE的objectmodel才增加了document.all对象,MSDN中也对Object.all有详细的说明,Object.all是个HTMLCollection,不是数组,它包含document.all:http://msdn.microsoft.com/en-us/library/ms537434%28VS.85%29.aspx自他出现后,IE后续版本也…

  • html二级菜单的创建[通俗易懂]

    html二级菜单的创建[通俗易懂]二级菜单用的是无序列表嵌套,:hover鼠标悬浮其上方发生的事<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″/> <title></title> <styletype=”text/css”> *{margin:0; …

  • 8000401a 错误及解决办法「建议收藏」

    8000401a 错误及解决办法「建议收藏」将web程序部署到服务器上时,偶尔会遇到下面的错误:System.Runtime.InteropServices.COMException(0x8000401A):检索COM类工厂中CLSID为{91493441-5A91-11CF-8700-00AA0060263B}的组件时失败,原因是出现以下错误:8000401a。在MSOfficeDocUtils.Powe…

  • 什么是雪崩效应?雪崩效应常见场景及应对策略

    什么是雪崩效应?雪崩效应常见场景及应对策略一、什么是雪崩效应分布式系统环境下,服务间类似依赖非常常见,一个业务调用通常依赖多个基础服务。如下图,对于同步调用,当会员服务不可用时,订单服务请求线程被阻塞,当有大批量请求调用会员服务时,最终可能导致整个会员服务资源耗尽,无法继续对外提供服务。并且这种不可用可能沿请求调用链向上传递,这种现象被称为雪崩效应。​二、雪崩效应常见场景硬件故障:如剔除坏盘抖动,服务器宕机,网络抖动,机房断电,光纤被挖断等;流量激增:如异常流量,重试加大流量等;缓存穿透:短时间内大量缓存失效时,大

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号