复选下拉框_下拉复选框 - CSDN
精华内容
参与话题
  • 带多框的下拉列表

    万次阅读 2018-08-01 12:41:56
    之前想写一个带多框的下拉列表,然后找相关的内容,发现大多都是用select写的,这种是默认的下拉列表样式,但有时候需要自己来写样式,这样用select就不合适了。 然后我就在csdn中无意间发现了一位博主...

    之前想写一个带多选框的下拉列表,然后找相关的内容,发现大多都是用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,就是选择取消的时候不能删除相应的文字。这个我暂时还没做出来,有哪位大神知道这个怎么做啊!

    展开全文
  • 带有复选框的下拉列表

    热门讨论 2020-07-30 23:33:30
    附件中使用两种方式实现了带有复选框功能的下拉列表,一种是用DIV控制,一种是用jquery
  • 实现带复选框的下拉列表

    万次阅读 2017-05-05 22:09:35
    最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。 注:(以下代码为本人自己编写,只是一个小...

    最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。

    注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.)

    html代码如下

    <body>
    <select id="box"></select>
    <div id="selectBox">
        <ul>
            <li><input type="checkbox" value="中国">中国</li>
            <li><input type="checkbox" value="英国">英国</li>
            <li><input type="checkbox" value="美国">美国</li>
            <li><input type="checkbox" value="韩国">韩国</li>
        </ul>
        <button value="5">确定</button>
    </div>
    </body>
    css代码如下
     * {
                padding: 0;
                margin: 0
            }
    
            #box {
                width: 100px;
                height: 20px;
                position: relative;
                top: 30px;
                left: 30px;
            }
    
            #selectBox {
                position: absolute;
                left: 30px;
                top: 60px;
            }
    
            ul {
                list-style: none;
            }

    html和css代码很简单,应该都能看懂,关键是js代码

    var arr = [];//定义一个数组用来接收多选框的值
        //初始化让下拉列表不显示
        $(function () {
            $('#selectBox').hide();
        })
        //单击下拉列表时显示/隐藏下拉列表
        $('#box').click(function () {
            $('#selectBox').toggle();
        })
        //监听checkbox的value值 改变则执行下列操作
        $("input").change(function () {
            if ($(this).prop("checked")) {
                arr.push($(this).val());//将选中的选项添加到数组中
            } else {
                var index = getIndex(arr, $(this).val())//找到没有选中的选项在数组中的索引
                arr.splice(index, 1);//在数组中删除该选项
            }
        })
        //这个函数用于获取指定值在数组中的索引
        function getIndex(arr, value) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == value) {
                    return i
                }
            }
        }
        //点击按钮是弹出数组
        $('button').click(function () {
            alert(arr)
        })

    最后的效果如图:

    初始化的效果


    点击下拉列表后的效果


    选中一些选项后点击确定的效果


    去除一些选项后的效果




    展开全文
  • 复选下拉框组件

    千次阅读 2018-12-11 22:00:40
    做报表的时候,筛选条件中需要用到复选下拉框,首先说明: 复选框(复选框)无法满足我的需求,因为可选项有上百个,不可能都直接列在页面上 下拉框(选择)也无法满足,因为不支持复选 在网上找了很久,找到一个...

    说明需求
    做报表的时候,筛选条件中需要用到复选下拉框,首先说明:

    1. 复选框(复选框)无法满足我的需求,因为可选项有上百个,不可能都直接列在页面上
    2. 下拉框(选择)也无法满足,因为不支持复选

    在网上找了很久,找到一个比较合适的复选框组件,效果如下:

    详细网址如下:
    https ://developer.snapappointments.com/bootstrap-select/


    需要引入的CSS和JS,引入及位置
    需要引入的文件可以从这里下载,不想费积分可以直接从这里下载,导入自己项目位置如下面图示,主要的8个文件被红框框住的就是,然后将CSS,JS引入到你的JSP即可。

    具体使用实例如下,假设JSP中有如下代码:

                                <span>牛人学历:</span>
                                <span>
                                    <select class="selectpicker" id="degree" multiple title="请选择:">
                                        <option value="0">初中及以下</option>
                                        <option value="1">中专/中技</option>
                                        <option value="2">中专及以下</option>
                                        <option value="3">中专</option>
                                        <option value="4">大专</option>
                                        <option value="4">本科</option>
                                        <option value="4">硕士</option>
                                        <option value="4">博士</option>
                                    </select>

     

    1取值方法

    var degree = $('#degree').val()+"";
    if("null" == degree || "undefined" == degree){
        degree="";
    }

    2onclick事件获取

        $('#degree').on('changed.bs.select',function(){
    
    
            var level2Code =  "("+$('#secondJob').val()+")";
            var json = {
                jobLevel:'3',
                level2Code:level2Code
            };
            $.ajax({
                type: "POST",
                url: "../bireport/getJobByLevel.action",
                contentType : "application/json",
                dataType:"html",
                data: JSON.stringify(json),
                success: function(resp){
                    $("#thirdJob").html(resp);
                    $('#thirdJob').selectpicker("refresh");
                },
                error:function(resp){
                    $.messager.alert('出错了','系统出错,请联系管理员。','error');
                }
            });
    
            }
        );

     

    3下拉框下拉选项内容修改

     $("#degree").html("<option value="3">中专</option> <option value="4">大专</option>");
      $('#degree').selectpicker("refresh");

    4设置下拉框不可选

                $('#degree').attr("disabled",true);
    

     

    5如果不想支持多选,去掉 select中的mutiple即可,如下:

                                    <select class="selectpicker"  id="unactiveDays"  title="请选择:">
                                        <option value="近三个月内活跃">近三个月内活跃</option>
                                        <option value="近一个月内活跃">近一个月内活跃</option>
                                        <option value="近一周内活跃">近一周内活跃</option>
                                        <option value="近一天活跃">近一天活跃</option>
                                    </select>

    6获取下拉框组件别的属性的值

    <select class="selectpicker" id="degree" multiple title="请选择:">
        <option  name='nameValue' value='code'>nameValue</option>
    </select>
    // 获取name属性值的方法如下
     //var firstJob = $('#degree').find("option:selected").attr("name");

    详情可看:

    https://developer.snapappointments.com/bootstrap-select/

    展开全文
  • 复选框的下拉框

    千次阅读 2014-09-28 16:35:55
    /* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{

    效果图:


    css:

    <style type="text/css">
    /* 带复选框的下拉框  */
    ul li{
    	 list-style: none;
    	 padding:0px;
    	 margin: 0px;
    }
    	
    .select_checkBox{
    	border:0px solid red;
    	position: relative;
    	display:inline-block;
    	
    	
    }	
    .chartQuota{
    	height:23px;
    	float:left;
    	display:inline-block;
    	border:0px solid black;
    	position: relative;
    }
    
    .chartOptionsFlowTrend{
        z-index:300;
        background-color:white;
    	border:1px solid gray;
    	display:none;
    	position: absolute;
    	left:0px;
    	top:23px;
    	width:150px;
    }
    .chartOptionsFlowTrend ul{
    	float:left;
    	padding: 0px;
    	margin: 5px;
    }
    .chartOptionsFlowTrend li{
    	/* float:left; */
    	display:block;
    	position: relative;
    	left:0px;
    	margin: 0px;
    	clear:both;
    }
    .chartOptionsFlowTrend li *{
    	float:left;
    }
    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    }
    .chartQuota p a {
    float: left;
    height: 21px;
    outline: 0 none;
    border: 1px solid #ccc;
    line-height: 22px;
    padding: 0 5px;
    overflow: hidden;
    background: #eaeaea;
    color: #313131;
    text-decoration: none;
    }	
    
    .chartQuota p {
    margin:0px;
    folat:left;
    overflow: hidden;
    height: 23px;
    line-height:24px;
    display: inline-block;
    }	
    .chartOptionsFlowTrend p {
    height: 23px;
    line-height: 23px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: #fefbf7;
    padding-top: 0px;
    display: inline-block;
    }
    .chartOptionsFlowTrend p a {
    border: 1px solid #fff;
    margin-left: 15px;
    color: #2e91da;
    }
    </style>

    html:

    	<div class="select_checkBox">
    		<div class="chartQuota">
    			<p>
    				<a href="javascript:;" hidefocus="true" title="请选择指标"><span>选择指标</span>
    					<b></b>
    				</a>
    			</p>
    			
    		</div><br>
    		<div class="chartOptionsFlowTrend"">
    				<ul>
    					<li class=""><input type="checkbox" value="1"><span>浏览次数(PV)</span>
    					</li>
    					<li class=""><input type="checkbox" value="1"><span>独立访客(UV)</span>
    					</li>
    					<li class=""><input type="checkbox" value="1"><span>IP</span>
    					</li>
    					<li class=""><input type="checkbox" value="1"><span>新独立访客</span>
    					</li>
    					<li class=""><input type="checkbox" value="1"><span>访问次数</span>
    					</li>
    				</ul>
    				<p>
    					<a href="javascript:;" title="确定" hidefocus="true" class="a_0">确定</a><a
    						href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a>
    				</p>
    			</div>
    	</div>

    js:

    <script type="text/javascript">
    	$(function(){
    		$(".select_checkBox").hover(function(){
    			$(".chartOptionsFlowTrend").css("display","inline-block");
    		},function(){
    			$(".chartOptionsFlowTrend").css("display","none");
    		});
    	});
    </script>




    展开全文
  • 实现下拉框并且带有复选框功能

    千次阅读 2018-08-03 08:37:00
    工作中遇到要实现这样的功能:下拉框并且带有复选框。记录一下。 1 引入css: &lt;link rel="stylesheet" href="${base}/resources/basic/css/zTreeStyle.css"/&gt; &lt;link ...
  • EXCEL选择下拉框实现复选

    万次阅读 2018-07-06 11:20:04
    参考地址:点击打开链接第一步:新建一个excel且设置数据有效性【选中X列--数据--有效性】第二步:开发工具--查看代码--把代码复制进去保存就OK了代码如下:Private Sub Worksheet_Change(ByVal Target As Range) ...
  • 行政人事部的小张美女说:HI,小gong年度问卷调查你帮我导出下数据呗,快点我马上要用。我心想:我怎么把这事忘了。回答好呗。 之前都是用webfrom,winform,CR去做的,...二、绑定下拉框与下拉复选框 (1)下拉框: (2
  • 【FineReport】下拉框复选框之间参数联动

    千次阅读 热门讨论 2019-03-16 09:47:09
    【FineReport】下拉框与下拉复选框之间参数联动 描述 1,CLASSNO下拉框可以选择班级,STUDENTNO复选框可以选择该班级的学生,可全选或者不选。 2,当不选CLASSNO时,复选框可显示全部学生,可全选或不选。 实现 ...
  • 下拉框中可以实现复选

    万次阅读 2018-08-18 11:32:04
    -- 下面是下拉框中含有复选框。要是能够传值,必须重写easyui——combox,用js添加复选框--&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;label class="...
  • 想要的是在图形界面上实现 一个下下拉框实现含有复选框的实现 !!可是我真的实现不了!就大神帮忙求解!
  • Axure RP 8自定义复选下拉框,选中项文字同步显示

    万次阅读 热门讨论 2020-01-11 19:56:12
    Axure RP 8自定义复选下拉框,选中项文字同步显示
  • select 下拉框多选,用select代替checkbox

    万次阅读 热门讨论 2018-03-31 23:26:49
    演示:http://www.freejs.net/demo/524/index.html&lt;select class="demo" multiple="multiple"&gt; &lt;optgroup label="Languages"&gt; ...g
  • HTML下拉框多选

    万次阅读 2016-02-26 11:44:25
    HTML下拉框多选<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="C
  • 实现一个需求:下拉框选择,支持复选,选择后的结果用“;”号分隔显示名。。 这个怎么实现
  • 5.一个带CheckBox,分组,颜色标记等功能的下拉框 PowerComboBoxCSharp.rar                      包含自动完成下拉框,字体下拉框,电脑盘符,多列下拉框,带CheckBox,树型下拉框等.代码主要来自...
  • Layui插件表格下拉框

    万次阅读 2019-07-06 22:01:00
    开发工具与关键技术: Vs 、Layui插件表格下拉框 作者:木有窝的鸟~小通 撰写时间:2019年7月6日 使用到layui插件的小伙伴可能都会发现,其实在layui插件表格里边添加下拉框或者input标签文本框都是比较复杂的...
  • 请问大家,我现在想实现一个功能,选中下拉列表中的一项,然后这一项对应的许多可选的复选框也动态显示出来。因为下拉列表中的每一项,分别对应了不同的复选框。哪位大神能给解决一下,万分感谢~~
  • layui 获取下拉框的值 var type = $("填写id").find("option:selected").attr("value");// 根据id获取指定的下拉框 var type = $("select option:checked").attr("value"); 获取单选框 var optionVal = $...
  • layui下拉框复选框实现

    千次阅读 2019-01-11 14:40:03
    html: &lt;div class="layui-input-inline" style="width:100px;"&gt; &lt;select name="Field" lay-filter="Field" placeholder="...
1 2 3 4 5 ... 20
收藏数 18,896
精华内容 7,558
关键字:

复选下拉框