精华内容
下载资源
问答
  • html多选下拉框
    2021-06-14 01:41:43

    今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用jquery写了一个多选下拉框,js写得比较简洁。代码如下。

    js代码

    (function(){

    $.fn.extend({

    checks_select: function(options){

    jq_checks_select = null;

    $(this).click(function(e){

    jq_check = $(this);

    //jq_check.attr("class", "");

    if (jq_checks_select == null) {

    jq_checks_select = $("

    $.each(options, function(i, n){

    check_div=$("

    " + n + "
    ").appendTo(jq_checks_select);

    check_box=check_div.children();

    check_box.click(function(e){

    //jq_check.attr("value",$(this).attr("value") );

    temp="";

    $("input:checked").each(function(i){

    if(i==0){

    temp=$(this).attr("value");

    }else{

    temp+="、"+$(this).attr("value");

    }

    });

    jq_check.attr("value",temp);

    e.stopPropagation();

    });

    });

    }else{

    jq_checks_select.toggle();

    }

    e.stopPropagation();

    });

    $(document).click(function () {

    jq_checks_select.hide();

    });

    //$(this).blur(function(){

    //jq_checks_select.css("visibility","hidden");

    //alert();

    //});

    }

    })

    })(jQuery);

    html

    $(document).ready(function(){

    var options = {

    1: "第一个选择项",

    2: "第二个选择项",

    3: "第三个选择项",

    4: "第四个选择项",

    5: "第五个选择项",

    6: "第六个选择项"

    };

    $("#test_div").checks_select(options);

    });

    .checks_div_select {

    width: 150px;

    background-color: #e9fbfb;

    border: 1px solid #18cbcd;

    font-family: 'Verdana', '宋体';

    font-size: 12px;

    position:absolute;

    left:2px;

    top:25px;

    }

    需要jquery类库

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

    热门讨论 2013-04-09 13:52:06
    html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
  • html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
  • layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心...
  • 使用bootstrap实现多选下拉框
  • HTML:select2多选下拉框

    千次阅读 2022-05-07 16:45:48
    1、Head标签内引入所需要的链接css...2、在需要整多选下拉框的地方加入这个 <div class="form-group"> <label class="col-sm-3 control-label">能源分类+分项:</label> <div class="co...

    1、Head标签内引入所需要的链接css样式

     

    <th:block th:include="include :: select2-css" />

    2、在需要整多选下拉框的地方加入这个

    <div class="form-group">
    
                    <label class="col-sm-3 control-label">能源分类+分项:</label>
    
                    <div class="col-sm-8">
    
                        <select name="collectEnergytypecode" class="form-control select2-multiple" th:with="type=${@dict.getEnergyName()}" required multiple>
    
                            <option th:each="dict : ${type}" th:text="${dict.name}" th:value="${dict.code}"></option>
    
                        </select>
    
                    </div>
    
                </div>

     

    3、在script标签上面添加js

     

    <th:block th:include="include :: select2-js" />

    4、script标签里面加入方法

     

    $(function() {
    
                $('#collectEnergyclasscode').select2({
    
                    placeholder: "请选择",
    
                    allowClear: true
    
                });
    
            })

    展开全文
  • 纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!
  • 一个jquery ui,实现html多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据。jsp页面例子:pageEncoding="UTF-8" import="java.util.*,java.text.*"%>String path =...

    一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据。

    jsp页面例子:

    pageEncoding="UTF-8" import="java.util.*,java.text.*"%>

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

    + request.getServerName() + ":" + request.getServerPort()

    + path + "/";

    %>

    纳税用户核定

    href="/js/dropdownchecklist/ui.dropdownchecklist.css" />

    $(document).ready(function() {

    $("#POSITION").dropdownchecklist({firstItemChecksAll: true, maxDropHeight: 100});

    });

    id="formConditon" name="formCondition" method="post"

    target="listFrame">

    cellspacing="0">

    cellspacing="0">

    background="/templates/images/inner/center_bg01.jpg">

    cellspacing="0">

                icon01.jpg

      纳税用户核定 

    cellspacing="0" background="/templates/img/query_01.gif">

    class="blue-border" bordercolor="#CCCCCC">

    计算机代码:

    纳税人名称:

    纳税人状态:

    ${info.NSRZTMC}

    ${info.NSRZTMC}

    查询核定类型:

    全选择

    ${info.XLMC}

    是否核定:

    税务机关:

    ${info.JC}

    ${info.JC}

    登记注册类型:

    ${info.DJZCLXMC}

    ${info.DJZCLXMC}

    国家标准行业:

    ${info.GJBZHYMC}

    ${info.GJBZHYMC}

    value="查      询"

    οnclick="qry()" class="button01">

    cellspacing="0">

    id="listFrame" src="/back.jsp" scrolling="no">

    //查询

    function qry(){

    document.formCondition.submit();

    }

    注意:页面导入的库,这个版本的下拉框架样式,在ie中存在问题,最好去下载新版本的。

    java后台得到jsp提交的多选数据:

    String [] positions= getRequest().getParameterValues("POSITION");

    展开全文
  • 首先下载jquery.multiselect.js 的插件然后复制下列代码,只需改下路径就可以实现可多选下拉框。如果好用还请多多支持! 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • html分组多选单选下拉框
  • layui多选下拉框

    千次阅读 2021-07-23 11:00:25
    HTML代码 <select class="param_belong" multiple="multiple" lay-filter="selectTest" name="belong"> <option value=""></option> <option th:each="type, typeS: ${belong}" th...

    HTML代码

     <select class="param_belong" multiple="multiple" 
     					lay-filter="selectTest" name="belong">
             <option value=""></option>
              <option
                 th:each="type, typeS: ${belong}"
                 th:value="${type.objId}"
                 th:text="${type.name}"
                 th:selected="${type.selected}"></option>
      </select>
    

    导入js

    <script th:src="@{/js/multiSelect.js}" charset="utf-8"></script>
    

    我使用时候 以上就可以实现多选下拉框的功能;我新增和修改页面用的同一个页面,但点击修改页面时,多选框变成了单选框,点击新增页面却无问题。后来发现是因为layui渲染的问题。加上下面代码即可解决

    在layui注册下拉框

    layui.use(['upload', 'element', 'form', 'layer', 'laydate', "multiSelect"], function () {
           layui.multiSelect.render('select','selectTest');
        });
    

    js文件我就不分享了,自己复制代码 新建js文件粘贴进去吧!文件名称取:multiSelect.js 嗷!

    layui.define("form", function(exports) {
    	var MOD_NAME = "multiSelect",
    		o = layui.jquery,
    		form = layui.form,
    		selected_vals = [],
    		multiSelect = function() {};
    
    	multiSelect.prototype.init = function() {
    		var ts = this;
    		o('select[multiple]').each(function(idx, item) {
    			var t = o(this),
    				selds = [];
    			t.find('option:selected').each(function() {
    				selds.push(o(this).val());
    			})
    			t.next().addClass('multi').find('.layui-select-title').click(function() {
    				selected_vals[idx] && o(this).find('input').val(selected_vals[idx].join(','));
    			}).next().find('dd').each(function() {
    				var dt = o(this),
    					checked = (dt.hasClass('layui-this') || o.inArray(dt.attr('lay-value'), selds) > -1) ? 'checked' : '',
    					title = dt.text(),
    					disabled = dt.attr('lay-value') === '' ? 'disabled' : '';
    				dt.html('<input type="checkbox" lay-skin="primary" title="' + title + '" ' + checked + ' ' + disabled + '>');
    				ts.selected(idx, t, dt);
    			}).click(function(e) {
    				var dt = o(this);
    				// 点击下拉框每一行触发选中和反选
    				if(e.target.localName == 'dd' && dt.attr('lay-value') !== '') {
    					var status = dt.find('.layui-form-checkbox').toggleClass('layui-form-checked').hasClass('layui-form-checked');
    					dt.find('input').prop('checked', status);
    				}
    				// 禁止下拉框收回
    				dt.parents('.layui-form-select').addClass('layui-form-selected');
    				ts.selected(idx, t, dt);
    			});
    		})
    		form.render('checkbox');
    	}
    
    	multiSelect.prototype.selected = function(idx, t, dt) {
    		// 选中值存入数组
    		selected_vals[idx] = [];
    		// 先清除真实下拉款选中的值,在下面循环中重新赋值选中
    		t.find('option').prop('selected', false);
    		dt.parents('dl').find('[type=checkbox]:checked').each(function() {
    			var val = o(this).parent().attr('lay-value');
    			t.find('option[value=' + val + ']').prop('selected', true);
    			selected_vals[idx].push(o(this).attr('title'));
    		})
    		// 显示已选信息
    		dt.parents('dl').prev().find('input').val(selected_vals[idx].join(','));
    	}
    
    	multiSelect.prototype.render = function(type, filter) {
    		form.render(type, filter);
    		this.init();
    	}
    
    	var i = new multiSelect();
    	i.init();
    
    	exports(MOD_NAME, i);
    });
    
    展开全文
  • 使用jquery实现的风格的多选下拉框demo,直接打开index.html就可以使用。适合集成到后台系统的多选下拉框业务场景
  • select实现---多选下拉框

    千次阅读 2022-01-06 17:31:37
    select列表多选下拉框 注意:formSelects v4的一些操作: https://blog.csdn.net/zyc050707/article/details/109809503 1.引入文件formSelects-v4.css和formSelects-v4.min.js 2.在相关的select列表中按照如下格式...
  • 使用bootstrap实现多选下拉框,获取值及绑定值
  • 多选下拉框使用方法一 1下载安装注册 // index.html <script src="libs/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script> // app.js "angularjs-dropdown-multiselect", ...
  • vant 多选下拉框

    千次阅读 2022-06-16 16:26:04
    vant 多选下拉框
  • 参考文档:https://multiple-select.wenzhixin.net.cn/docs/en/options.html 2. 解压找到 dist 文件夹 3. 个人示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&.
  • jquery简单多选下拉框

    千次阅读 2019-02-20 11:05:55
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; *{ padding: 0; ...
  • 多选下拉框.zip

    2019-11-06 15:17:13
    下拉框多选,使用jQuery.js的和select.jquery.js 实现多选的效果。
  • 以下内容,大部分摘自文章:https://www.cnblogs.com/anny0404/p/5329960.html 笔者再自行根据需要添加必要的内容。 html页面中,引用如下: <!-- Latest compiled and minified CSS --> ...
  • 一个jquery ui,实现html多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据。jsp页面例子:pageEncoding="UTF-8" import="java.util.*,java.text.*"%>String path =...
  • c#多选下拉框(ComboBox)

    千次阅读 2019-10-02 08:06:41
    代码如下 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Drawing; 5 using System.Data; 6 using System.Linq;... 7 using System.T...
  • 1.使用angularjs自定义指令实现多选下拉框 2.样式使用bootstrap.css 3.图标使用font-awesome.css 使用方法: 创建节点:<angular-mult-select options="datas" ng-model="selectModel"></angular-mult-...
  • jQuery多选下拉框插件

    2021-06-11 14:21:19
    jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。使用方法在页面中引入下面的文件。lt;link rel="stylesheet" type="text/css" href="./src/...
  • 效果: 1、multiple类型的select官方提供了最大显示属性,超出部分显示+n zorro:[nzMaxTagCount]="1" antd::maxTagCount="1" 2、样式中强制一行显示选项 zorro: nz-select{ ::ng-deep{ ...
  • 项目中要实现多选,就想到用插件,选择了bootstrap-select。 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的。对付看吧。有机会每个方法实践一下,会总结的。我自己也等着呢。 ...
  • 增强的事件处理 jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。 更改网页内容 jQuery可以修改网页中的内容,比如更改网页的文本...
  • VUE中,el-select选择器多选下拉框实现全选功能和取消全选 Select 选择器之elementUI版——https://element.eleme.cn/#/zh-CN/component/select Select 选择器之Ant Design of Vue版——...
  • 在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来。 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌。 关于车迷的Model: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,860
精华内容 3,944
关键字:

html多选下拉框