精华内容
下载资源
问答
  • jquery sumoselect 插件实现 select下拉 复选框
    2021-06-10 17:36:25

    jquery sumoselect  插件实现 select下拉 复选框,这是国外的大牛写的,参考网站如下:

    http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html  官方demo网站

    http://hemantnegi.github.io/jquery.sumoselect/  官网的方法使用说明.

    1.只需要导入js和css,就可以直接在select上加一个,关键是multiple="multiple",就可以使用这个下拉复选框了,使用的方式如下:

    $(document).ready(function () {

    $('.SlectBox').SumoSelect({placeholder: 'This is a placeholder',csvDispCount: 3 });

    });        运行结果为:

    0818b9ca8b590ca3270a3433284dd417.png

    这些样式,还有更复杂的分组选择,如果要获取的选中的value值,我是自己写的遍历each选中的,然后用,逗号分割,传给后台的时候,再变成数组,如下代码:(在官网没有看到获取选中value的方法,有朋友知道可以告诉我):

    //==========遍历多选===============

    var positionRankSelectSpilt = "";

    $("#positionRank option:selected").each(function(){

    positionRankSelectSpilt += $(this).val()+ ",";

    });

    //职级的多选去掉最后一个逗号

    positionRankSelectSpilt = positionRankSelectSpilt.substring(0,positionRankSelectSpilt.length -1);

    alert("选中的:"+positionRankSelectSpilt);

    //=====================================

    更多相关内容
  • 下拉复选框

    2015-10-29 18:23:46
    jquery 下拉复选框控件,支持多选,全选,返回默认值
  • 该插件是一个n级下拉复选框组件,解决需要划分多级功能的需求,如权限分配、商品划分等功能。 实现方式请查看laravel-admin官方文档有关Form表单的自定义组件。
  • bootstrap-select插件,jquery实现的下拉选择。
  • jquery.multiselect 下拉多选插件 下拉复选框插件 可以直接使用的demo
  • jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表插件。该jQuery下拉列表插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该...
  • 实现下拉复选框

    2021-09-02 14:20:30
    本质上也不能说是下拉复选框吧,其实就是一开始实现了一个下拉列表,在单击 select 框的时候显示、隐藏。 CSS: #select{ width: 100px; height: 20px; position: relative; top: 10px; right: 10px; }...

    最近有需求需要同时查看指定的多个环境的CPU、内存资源占用情况,又不能一次性把所有环境的数据都返回,就得实现一个下拉复选框。最终实现的效果是这样子的:
    在这里插入图片描述
    本质上也不能说是下拉复选框吧,其实就是一开始实现了一个下拉列表,在单击 select 框的时候显示、隐藏。

    CSS:

    #select{
    
        width: 100px;
    
        height: 20px;
    
        position: relative;
    
        top: 10px;
        
        right: 10px;
    
        }
    
     #list{
    
        width: 100px;
    
        height: 20px;
    
        position: relative;
    
        top: 10px;
    
        right: 10px;
    
       }
    

    HTML:

    <select id="select"></select>
    <div id="list">
        <ul>
        	{% for node in node_cpu_list %}
            	<li><input type="checkbox" value={{ node }}>{{ node }}</li>
            {% endfor %}
        </ul>
        <button id="nodecpu" onclick="monitor_type()">确定</button>
    </div>
    

    JavaScript:

    <script type="text/javascript">
    	
    	var arr = [];
        $(function () {
            $('#list').hide();
        })
        //使用 toggle 方法切换 hide() 和 show() 方法
        $('#select').click(function () {
            $('#list').toggle();
        })
        $("input").change(function () {
            if ($(this).prop("checked")) {
                arr.push($(this).val());
            } else {
            	let i = arr.indexOf(value);
            	arr.splice(i, 1);
            }
        })
        //点击确定按钮调用 monitor_type 函数
    	function monitor_type(){
    			console.log(arr);
    		}
    	</script>
    

    过程中还遇到了一个很奇怪的问题,当我把 list 设置成 absolute 的时候,点击完一次确定按钮之后就没办法取消复选框了,改成 relative 之后就解决了,有点迷茫。

    展开全文
  • select下拉复选

    千次阅读 2019-01-10 14:07:04
    就是在select标签上添加multiple=&quot;multiple&quot;属性,多选需要借助ctrl与shift键。写法简单,但是效果吗… &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&...

    先发一下我想要的效果
    在这里插入图片描述
    大概就是这个样子。

    原版

    就是在select标签上添加multiple="multiple"属性,多选需要借助ctrl与shift键。写法简单,但是效果吗…

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<select multiple="multiple" style="width: 100px;">
    			<option value ="1">1</option>
    			<option value ="2">2</option>
    			<option value ="3">3</option>
    			<option value ="4">4</option>
    		</select>
    	</body>
    </html>
    

    在这里插入图片描述
    开玩笑一样的样式,真的有甲方能同意吗?

    jquery.multiselect

    下载地址:https://github.com/ehynds/jquery-ui-multiselect-widget

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    
    		<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery.multiselect.css" />
    		<link rel="stylesheet" type="text/css" href="../../css/jmulti/prettify.css" />
    		<link rel="stylesheet" type="text/css" href="../../css/jmulti/style.css" />
    		<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery-ui.css" />
    
    		<script src="../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../js/jmulti/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../js/jmulti/jquery.multiselect.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../js/jmulti/prettify.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../js/jmulti/widget.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    
    		</style>
    
    		<script type="text/javascript">
    			$(function() {
    				$("#select_users1").multiselect({
    					noneSelectedText: "",
    					checkAllText: "全选",
    					uncheckAllText: '全不选',
    					selectedList: 5
    
    				});
    
    				$("#select_users2").multiselect({
    					noneSelectedText: "",
    					checkAllText: "全选",
    					uncheckAllText: '全不选',
    					selectedList: 5
    
    				});
    
    			});
    			
    			function ck(){
    				alert(jQuery("#select_users2").val());
    			}
    
    		</script>
    	</head>
    	<body>
    
    		<select name="Users" multiple="multiple" id="select_users1">
    			<option value="1" selected="selected">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    			<option value="4">4</option>
    			<option value="5">5</option>
    			<option value="6">6</option>
    			<option value="7">7</option>
    		</select>
    
    		<select name="Users" multiple="multiple" id="select_users2">
    			<option value="1a">1a</option>
    			<option value="2a">2a</option>
    			<option value="3a">3a</option>
    			<option value="4a">4a</option>
    			<option value="5a">5a</option>
    			<option value="6a">6a</option>
    			<option value="7a">7a</option>
    		</select>
    
    <input type="button" id="input1" value="test" onclick="ck();" />
    
    	</body>
    </html>
    

    效果
    在这里插入图片描述

    freejs .net

    在这里插入图片描述
    好像要收费的样子,没有仔细研究。

    wenzhixin_multiple-select

    https://github.com/wenzhixin/multiple-select
    git上随便找的,好像挺简单的样子。
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../../js/wenzhixin_multiple-select/multiple-select.js" type="text/javascript" charset="utf-8"></script>
    		<link rel="stylesheet" type="text/css" href="../../../css/wenzhixin_multiple-select/multiple-select.css"/>
    	<style type="text/css">
    select {
      width: 500px;
    }
    	</style>
    	</head>
    	<body>
    <select multiple="multiple">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>
    
    <input type="button" name="" id="" value="test" onclick="ck();" />
    
    <script>
      (function mounted() {
        $('select').multipleSelect();
      })();
      
      function ck(){
    	  alert($('select').val());
      }
    </script>
    
    	</body>
    </html>
    

    git上还有大量相关代码 https://github.com/search?q=multiple-select

    自己写的

    自用,修改方便,并且能避免各种各样的兼容问题。

    通过查看大量代码,发现一般的套路就是,需要自己写一个正常select标签,然后调用某个方法,将select隐藏,并在下面生成由li组成的下拉列表。一般都是这样的格式
    在这里插入图片描述

    按照这种套路,写了一个(未添加css)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    
    	<!-- 完全通过_yflag属性区分类别 -->
    	<div _yflag="multiDiv" id="testdiv1">
    		<input _ymultiId="id1" type="text" value="" _yflag="multiInput">
    		<!-- 可以回显 -->
    		<input _ymultiId="id1" type="hidden" value="1;2" _yflag="trueVal_multi" >
    		<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;" 
    			_yflag="multiSelectDiv">
    			<ul style="list-style-type:none;padding-left: 5px;">
    				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
    				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
    			</ul>
    		</div>
    	</div>
    	
    	<div _yflag="multiDiv" id="testdiv2">
    		<input _ymultiId="id2" type="text" value="" _yflag="multiInput">
    		<input _ymultiId="id2" type="hidden" value="" _yflag="trueVal_multi" >
    		<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;" 
    			_yflag="multiSelectDiv">
    			<ul style="list-style-type:none;padding-left: 5px;">
    				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
    				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
    			</ul>
    		</div>
    	</div>	
    	
    	<input type="button" name="" id="" value="test" onclick="ck();" />
    
    	<script type="text/javascript">
    	
    		jQuery("[_yflag='multiDiv']").click(function(event){
    	  		var ev = event || window.event;
    	  		if (ev.stopPropagation) {
    	   			ev.stopPropagation();
    	  		}else{
    	   			ev.cancelable = true;
    	  		}
    	  		jQuery(this).find("[_yflag='multiSelectDiv']").css("display","block");
    	 	});
    	 	
    	 	jQuery(document).click(function(){
    			jQuery("[_yflag=multiSelectDiv]:visible").each(function(i){
    				refrashMultiDiv(jQuery(this).parent(), 'no');
    			});
    	  		jQuery("[_yflag=multiSelectDiv]").css("display","none");
    	 	});
    
    		function refrashMultiDiv(thisObj, isInit){
    			var valTemp = "";
    			var trueVal = thisObj.find("[_yflag='checkbox']:checked").each(function(i){
    				valTemp += jQuery(this).val() + ";";
    			});
    			if(valTemp)
    				valTemp = valTemp.substr(0, valTemp.length - 1);
    			
    			if(isInit == 'yes'){
    				trueVal = thisObj.find("[_yflag='trueVal_multi']").val();
    			}else {
    				trueVal = valTemp;
    			}
    			
    	 		if(!trueVal)
    	 			return clearThisObj(thisObj);
    	 		
    	 		var valArr = trueVal && trueVal.split(";");
    	 		if(!valArr)
    	 			return clearThisObj(thisObj);
    	 			
    	 		var showDesc = "";
    	 		var hideVal = "";
    		
    	 		thisObj.find("[_yflag='multiLi']").each(function(i){
    	 			for(var j = 0; j < valArr.length; j++){
    	 				if(jQuery(this).find("[_yflag='checkbox']").val() == valArr[j]){
    	 					jQuery(this).find("[_yflag='checkbox']").attr("checked",true);
    	 					showDesc += jQuery(this).find("[_yflag='liShowDesc']").html() + ";";
    	 					hideVal += jQuery(this).find("[_yflag='checkbox']").val() + ";";
    	 				}
    	 			}
    	 		});
    	 		
    	 		if(showDesc){
    	 			thisObj.find("[_yflag='multiInput']").val(showDesc.substr(0, showDesc.length - 1));
    	 		}
    	 		if(hideVal){
    	 			thisObj.find("[_yflag='trueVal_multi']").val(hideVal.substr(0, hideVal.length - 1));
    	 		}
    		}
    		
    		function clearThisObj(thisObj){
    			thisObj.find("[_yflag='multiInput']").val("");
    			thisObj.find("[_yflag='trueVal_multi']").val("");
    		}
    
    	 	(function initMulti(){
    	 		jQuery("[_yflag='multiDiv']").each(function(i){
    	 			var thisObj = jQuery(this);
    	 			refrashMultiDiv(thisObj, 'yes');
    	 		});
    	 	})();
    		
    		function ck(){
    			alert(jQuery("[_ymultiId='id1'][_yflag='trueVal_multi']").val());
    		}
    	</script>  
    
    	</body>
    </html>
    
    
    展开全文
  • 项目中遇到一种情况:某个复选条件选项太多,把页面撑得很难看。如果有一个下拉复选框,就可以非常好地解决此问题。
  • 本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。先看看效果:下面我们看看代码:HTML代码:HTMLCSSJavaScriptjQueryPHPMySQLJavaC#C++Pyhtoncss...

    本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    先看看效果:

    3ddd3d909875f1047313dd43d938bfc0.gif

    下面我们看看代码:

    HTML代码:

    • HTML

    • CSS

    • JavaScript

    • jQuery

    • PHP

    • MySQL


    • Java

    • C#

    • C++

    • Pyhton

    css代码:div {

    display: inline-block;

    }

    select {

    min-width: 200px;

    height: 25px;

    border: 1px solid #000;

    }

    ul {

    display: none;

    list-style: none;

    margin: 0;

    padding: 0;

    border: 1px solid #000;

    }

    label {

    display: block;

    padding: 2px 10px;

    white-space: nowrap;

    }

    ul li:hover {

    background-color: #aabbcc;

    }

    JavaScript代码:/**

    * [dropDownCk 下拉复选框]

    * @param {[String]} boxId [父级元素id]

    * @param {[String]} selectId [下拉选id]

    * @param {[String]} hiddenId [隐藏区域id]

    * @return {[Array]} [description]

    */

    function dropDownCk(selectId,hiddenId) {

    var boxId = "#" + boxId,

    selectId = "#" + selectId,

    hiddenId = "#" + hiddenId;

    $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域

    $(this).hide();

    });

    $(selectId).click(function() { // 切换显示与隐藏

    $(hiddenId).toggle();

    });

    var tagArr = []; // 接收复选字段数组

    $(selectId).html("" + "请选择项目" + "");

    $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素

    if ($(this).is(':checked')) {

    tagArr.push($(this).parent().text());

    $(selectId).html("" + tagArr.join(",") + "");

    } else {

    tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素

    if (tagArr.length == 0) {

    $(selectId).html("" + "请选择项目" + "");

    } else {

    $(selectId).html("" + tagArr.join(",") + "");

    }

    }

    });

    return tagArr;

    }

    var tag1 = dropDownCk("lang1","ck1");

    var tag2 = dropDownCk("lang2","ck2")

    注意:当遇到选项比较多时,可以定义一个数组插入到HTML中,实现下拉的选项,可以参考三级联动的写法:玩转javascript之三级联动实例。

    展开全文
  • 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link ...
  • layui下拉复选框

    2020-12-24 19:12:52
    xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展 xm-select-v1.2.1 主页资源可免费下载~ 先看结果 js code <script src="../static/xmSelect/xm-select.js"><...
  • 本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...
  • //替换掉 //判断最后一个字符是否是逗号 if(selectText.charAt(selectText.length - 1)==","){ //去除末尾逗号 selectText=selectText.substring(0,selectText.length - 1); selectVal=...
  • 模拟所用元素:input,ul,li代码模拟实现带复选框下拉列表body{margin: 20px;}input{width: 150px;height: 30px;}ul{display: none;list-style: none;width: 150px;padding: 0;margin: 0;}...
  • layui下拉菜单复选框

    2022-05-07 15:37:15
    需求:在下拉菜单里实现复选框选项,并且选择了项清空其他选项,选择了其他选,清空A项 需要用到xm-select 效果: 代码: html: js: xm-select文档:xm-select js仓库:xm-select-v1.2.4
  • el-select multiple collapse-tags v-model="searchForm.auditResult" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择"> <el-option label="全选" value="全选" @click.native=...
  • HTML select 标签 下拉复选

    千次阅读 2018-04-07 20:56:47
    存于世,必要拯救世界,希望的...通过JS和CS 使select标签可以多选,前提需要加载JS和CSS,以及JQ。 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 【Layui】下拉复选框和回显展示

    千次阅读 2019-07-09 09:31:56
    1.引入 formSelect 相关资源 <link rel="stylesheet" href="${base}/static/layui/formSelects-v4.css" media="all"/> <script type="text/javascript" src="${base}/static/layui/formSelects-v4.js">...
  • PyQt5实现下拉复选框

    2021-05-28 22:10:50
    本博主在使用的时候,浪费了一点时间才调用成功,这里贴出下拉复选框的调用方法。 特别提醒: 如果,你的UI界面大部分是使用Qtdisigner设计的,那么使用下面的调用方法,就会大大减少代码的折腾强度。 1.第一步:在...
  • 最近在重构一个复选框组件,原型是select2这个jQuery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架...
  • 首先: 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> [removed][removed] layui.use('form',function){ ...
  • Bootstrap select多选下拉框赋值success: function (data) {var oldnumber = new Array();$.each(data, function (i) {oldnumber.push(data[i].id);});$('#editcolor .selectpicker').selectpicker('val'...//默认...
  • 针对不同的网页元素控件,详细讲述使用不同的方法自动填写。在浏览器里就可以实现,不需要另外安装软件。自动填表方案放在软件收藏栏,使用时就像打开一个网址一样简单。
  • element中select中使用复选框

    千次阅读 2020-12-07 18:34:45
    element中select框中使用复选框 script中代码 下面展示一些 内联代码片。 checkBoxfile(val) { let listClone = this.isFileList; this.isFileList = []; if (val.length === 0) { listClone.forEach((item) =&...
  • 效果图: ...下拉复选框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="tex
  • 1、单选框、复选框下拉选择框、文本域使用 input标签的单选框:type=radio //checked="checked" 默认选择 input标签的复选框:type=checkbox select 下拉选择框: <select name="address"> <option ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,839
精华内容 12,735
关键字:

html的select下拉复选框