Select2插件的隐藏、设置宽度

时间:2022-12-19 18:26:44
<select id="selPrinvice" class="Select2 select2-hidden-accessible" style="width:120px;" data-select2-id="selPrinvice" tabindex="-1" aria-hidden="true"><option value="" data-select2-id="4">请选择</option></select>
<span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="3" style="width: 120px; display: none;"
><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-selPrinvice-container">
<span class="select2-selection__rendered" id="select2-selPrinvice-container" role="textbox" aria-readonly="true" title="请选择">请选择</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

浏览器开发者模式发现,使用select2插件后,你看到的下拉框是span,真正的下拉框select是隐藏掉了。

所以要隐藏下拉框应该设置最外面的span隐藏。比如我的设置如下:

  $("#selPrinvice").next().css("display", "none"); //下拉框的后面一个元素隐藏

同理:设置宽度,也应该设置span。不过一开始在select写style="width:300px"时,在渲染成select2插件过程中,span的width取自于当前select的宽度。

Select2插件的隐藏、设置宽度的更多相关文章

  1. select2 插件编辑时设置默认值

    function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJs ...

  2. select2插件改造之设置自定义选项 源码

    改造特性: 适应业务需要,选项里面包含“其他”其它”,可以点击填写并设置自定义选项 效果图: 具体代码不做阐述,如有类似需求,请私信.主要源码: /* Copyright 2012 Igor Vayn ...

  3. select2插件

    引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min. ...

  4. 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...

  5. Metronic&lowbar;下拉列表Select2插件的使用

    这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https:// ...

  6. FlexSlider插件的详细设置参数 http&colon;&sol;&sol;www&period;woothemes&period;com&sol;flexslider&sol;

    http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...

  7. select2 取值 遍历 设置默认值

    select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...

  8. jQuery的下拉选select2插件用法

    1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...

  9. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

随机推荐

  1. Ettercap几种好玩的姿势

    0x00 简单的arp欺骗   命令 ettercap -i 网卡 -Tq -M arp:remote /受害者ip/ /网关ip/ 以下是我欺骗192.168.1.102主机并模拟http-get请 ...

  2. 使用mysqlslap对mysql进行压测,观察Azure虚拟机cpu使用率

    一直想做这个测试,原因很简单,很多人一直比较怀疑Azure的虚拟机性能,说相同的配置凭啥比阿里的虚拟机贵那么多,其实,我自己以前也怀疑过,但是接触Azure的几个月,确实发现Azure的虚拟机性能真的 ...

  3. Pycharm 2016 2 激活

    选其中一款,一个不行换另一个 1. 选License server激活,输入:http://114.215.133.70:41017/ 2. 43B4A73YYJ-eyJsaWNlbnNlSWQiOi ...

  4. nvm进行node多版本管理

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来 ...

  5. How to verify Certificate Pinning&quest;

    Some friends of mine they worry about the risk of Man-in-the-middle so they ask me how to verify the ...

  6. T-SQL基础(二)之关联查询

    在上篇博文中介绍了T-SQL查询的基础知识,本篇主要介绍稍微复杂的查询形式. 表运算符 表运算符的作用是把为其提供的表作为输入,经过逻辑查询处理,返回一个表结果.SQL Server支持四个表运算符: ...

  7. LODOP循环多任务 同模版只设置不同队列任务名

    LODOP中从PRINT_INIT(或PRINT_INITA)到最后PRINT(或PREVIEW等),是一个任务,关于Lodop中一个任务,以及一个任务中可以包含哪些语句,详细可查看本博客另一篇博文: ...

  8. Python创建目录

    需要包含os模块进来,使用相关函数即可实现目录的创建 1.创建目录要用到的函数: (1)os.path.exists(path) 判断一个目录是否存在 (2)os.makedirs(path) 多层创 ...

  9. 本地如何连接虚拟机上的MySql

    今天在本地链接虚拟机上的MySql,然而链接失败了!甚是尴尬! 首先想一想是什么原因导致链接失败: 基础环境:在Linux上安装mysql 1.检查虚拟机IP在本地是否可以ping 通过 虚拟机IP: ...

  10. 【PHP】 curl 上传文件 流

    在运行过程中, 以下两种方式要看你的PHP 版本 'file' =>'@' .$filePath 'file' =>new CURLFile(realpath($filePath)) 本次 ...