`

bootstrap 隐藏下拉框

 
阅读更多

最近在用select的时候,需要隐藏下拉框,而且是多选

<select id="selectSendMsgType" name="selectSendMsgType" multiple="multiple"   class="chosen-select-comp" >
            </select>

bootstrap中select 代码生成如下

<select id="selectSendMsgType" name="selectSendMsgType" multiple="multiple" class="chosen-select-comp" style="display: none;">
<option value="4" selected="">5675</option>
<option value="2" selected="">12</option>
<option value="342" selected="">何4</option>
<option value="5" selected="">王83</option>
<option value="54" selected="">杨1</option>
<option value="645" selected="">王</option>
<option value="65" selected="">吴7</option>
<option value="343" selected="">蔡</option>
<option value="34" selected="">王65</option>
<option value="99" selected="">潘1</option>
<option value="88" selected="">吴7</option>
<option value="77" selected="">蔡</option>
<option value="66" selected="">王</option>
<option value="55" selected="">潘1</option>
</select>

 

<div class="chosen-container chosen-container-multi" style="width: 100%; display: none;" title="" id="selectSendMsgType_chosen">  
<ul class="chosen-choices">  
        <li class="search-choice"><span>657</span><a class="search-choice-close" data-option-array-index="0"></a>
</li>  
        <li class="search-choice"><span>丽1</span><a class="search-choice-close" data-option-array-index="1"></a>  
       </li>
<li class="search-choice"><span>良</span><a class="search-choice-close" data-option-array-index="2">  
       </a></li><li class="search-choice"><span>83</span><a class="search-choice-close" data-option-array-index="3"></a>
</li>  
   <li class="search-choice"><span>霞1</span><a class="search-choice-close" data-option-array-index="4"></a></li>  
   <li class="search-choice"><span>宾</span><a class="search-choice-close" data-option-array-index="5"></a></li>  
  <li class="search-field"><input type="text" value="Select Some Options" class="" autocomplete="off" style="width: 25px;"></li>  
</ul>  
<div class="chosen-drop" style="display: none;></span>  
<ul class="chosen-results">  
<li class="result-selected" data-option-array-index="0" style="">undefined</li>  
<li class="result-selected" data-option-array-index="1" style="">汤1</li>  
<li class="result-selected" data-option-array-index="2" style="">何</li>  
<li class="result-selected" data-option-array-index="3" style="">王3</li>  
<li class="result-selected" data-option-array-index="4" style="">春1</li>  
<li class="result-selected" data-option-array-index="5" style="">王</li>  
<li class="active-result" data-option-array-index="6" style="">吴丹7</li>  
<li class="active-result" data-option-array-index="7" style="">蔡媛</li>  
<li class="active-result" data-option-array-index="8" style="">王65</li>  
<li class="active-result" data-option-array-index="9" style="">潘1</li>  
<li class="active-result" data-option-array-index="10" style="">丹7</li>  
<li class="active-result" data-option-array-index="11" style="">蔡</li>  
<li class="active-result" data-option-array-index="12" style="">王65</li>  
<li class="active-result" data-option-array-index="13" style="">金1</li>  
</ul>  
</div>  
</div> 
  其中下拉菜单正好是<div class="chosen-drop" style="display: none;">这块 所以只需要把这个隐藏就好 实现代码:
jQuery(".chosen-drop").hide();

 

分享到:
评论

相关推荐

    利用Bootstrap Multiselect实现下拉框多选功能

    利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的...

    解决bootstrap下拉菜单点击立即隐藏bug的方法

    本篇文章主要介绍了解决bootstrap下拉菜单点击立即隐藏bug的方法,具有一定的参考价值,有兴趣的可以了解一下

    快速解决select2在bootstrap模态框中下拉框隐藏的问题

    今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框;点击B时显示...

    全面解析Bootstrap中tab(选项卡)的使用方法

    3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5、如果定义了动画,先执行动画,然后回调 源码分析: 1、Show方法,是在单击一个元素的时候触发,会触发如下四个事件  1.1、Hiden.bs.tab:隐藏上...

    bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来。下面通过本文给大家介绍bootstrap如何让dropdown menu按钮式下拉框长度一致,需要的朋友可以参考下

    JS模拟bootstrap下拉菜单效果实例

    在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的“下拉菜单” 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当...

    浅谈bootstrap源码分析之tab(选项卡)

    3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5、如果定义了动画,先执行动画,然后回调 源码分析: 1、Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1、Hiden.bs.tab:隐藏上一...

Global site tag (gtag.js) - Google Analytics