`

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树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。在Web开发中,Bootstrap框架提供了丰富的样式和组件,大大简化了网页设计的工作...

    Bootstrap框架下下拉框select搜索功能

    `selectedText`参数可以自定义被选中的选项显示的文本,而`selectpicker('hide')`则用于隐藏下拉框。 `bootstrap-select`插件还支持许多其他特性,如多选(multiple)、分组(groups)、禁用选项(disabled)、...

    基于bootstrap做的地域选择下拉框.zip

    4. **交互友好**:Bootstrap的JS插件可能被用来增强下拉框的交互性,例如通过点击或输入触发下拉选项的显示和隐藏,或者实现级联选择效果。 5. **无障碍性**:遵循Web无障碍标准,确保视力障碍或其他障碍的用户也能...

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

    下面我们将详细讲解如何使用 Bootstrap Multiselect 实现下拉框多选功能,并在点击事件中获取选中的 option 值。 首先,为了使用 Bootstrap Multiselect,你需要确保页面中已经引入了必要的 CSS 和 JavaScript 文件...

    Bootstrap多级下拉菜单插件

    5. **API接口**:提供了一系列的JavaScript方法和事件,比如`toggle()`用于打开或关闭菜单,`show()`, `hide()`控制菜单的显示和隐藏,以及`update()`更新菜单状态等,开发者可以据此进行更复杂的交互设计。...

    bootstrap下拉列表与输入框组结合的样式调整

    在上述代码中,我们设置了`&lt;select&gt;`的宽度、内边距、圆角以及背景图像,使其看起来像一个按钮,同时隐藏了原生的下拉箭头,用自定义的图片`arrow.jpg`替代。 这样,我们就成功地将Bootstrap的下拉列表与输入框组...

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

    这篇文章针对在Bootstrap模态框中使用Select2插件时出现的下拉框隐藏问题提供了解决方案。Select2是一个将标准的HTML select元素转换为可搜索的下拉框的jQuery插件,广泛应用于Web开发中以提供更好的用户体验。...

    bootstrap可编辑下拉框jquery.editable-select

    - `onHide`:下拉框隐藏时触发。 - `onSelect`:用户选择了一个选项后触发。 这些事件可以用来监听和扩展组件的行为,例如在用户选择选项后执行特定的操作。 总的来说,jQuery.editable-select为Bootstrap的下拉框...

    ios下拉框下拉列表

    在iOS开发中,"下拉框"通常指的是可以展开或收起的一组选项,它在用户界面中提供了方便的交互方式。在iOS中,我们不直接使用“下拉框”这个概念,而是通过类似UIPickerView或者TableView来实现类似的功能。下面我们...

    jQuery Bootstrap和chosen集成下拉框插件特效.zip

    本压缩包“jQuery Bootstrap和chosen集成下拉框插件特效.zip”似乎包含了一个整合了这三者的示例,特别关注的是下拉框的特效,这对于提升用户界面体验至关重要。 首先,jQuery是一个快速、简洁的JavaScript库,它...

    bootstrap2 多级下拉菜单

    首先,Bootstrap的下拉菜单依赖于JavaScript插件,尤其是`dropdown.js`,它提供了点击事件来显示和隐藏下拉菜单。为了实现多级下拉菜单,我们需要对这个基础进行扩展,引入jQuery库以利用其强大的事件处理和DOM操作...

    下拉框隐藏与显示

    至此,我们就创建了一个基于div的自定义下拉框,它可以隐藏和显示选项列表。这个下拉框可以根据需求进行扩展,例如增加搜索功能、分组选项、或者动态加载内容。在实际开发中,还可以考虑使用现有的前端框架,如...

    bootstrapValidator bootstrap-select验证不可用的解决办法

    当用户在多选下拉框中做出选择后,我们需要更新隐藏input的值,并手动触发BootstrapValidator的验证。这可以通过监听Bootstrap-select的`hidden.bs.select`事件来实现: ```javascript $('#roleidForSelect').on...

    Bootstrap模块dropdown实现下拉框响应

    本篇文章将详细讲解如何利用Bootstrap的dropdown实现下拉框响应。 首先,我们来理解一下dropdown的基本结构。在HTML中,一个基本的Bootstrap dropdown通常包含一个触发器元素(如`&lt;a&gt;`或`&lt;button&gt;`),这个元素带有...

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

    3. **处理下拉框**:如果选项卡包含下拉菜单,点击下拉框中的一个选项不仅会使该选项被选中,同时也会使对应的下拉框保持展开状态。 4. **动画效果**:如果配置了动画效果,Bootstrap会在切换选项卡时执行相应的动画...

    通过css改变下拉框样式

    现代前端框架如Bootstrap和Materialize CSS提供预定义的下拉框组件,可以轻松实现自定义样式。这些框架通常包括对各种浏览器的兼容性处理,让开发者能够快速实现美观且一致的界面。 5. 考虑可访问性和兼容性: 在...

    使用bootstrap和jQuery制作下拉输入框

    Bootstrap是一个广泛使用的前端框架,它提供了丰富的组件和样式,使得网页设计更加简洁、响应式。jQuery则是一个强大的JavaScript库,简化了DOM操作,实现了复杂的动画效果和事件处理。在本教程中,我们将讨论如何...

    Bootstrap组合上、下拉框简单实现代码

    在Bootstrap中,组合上、下拉框(Combobox)是一种常见的交互元素,通常用于提供用户选择一个或多个选项的功能。在本篇文章中,我们将深入探讨如何使用Bootstrap实现这种组合上、下拉框,并通过具体的代码实例来展示...

    VueBootstrap:基于vue3和Bootstrap5的组件库

    在Vue3中,你可以利用Composition API来控制Dialog的显示与隐藏,以及设置其标题、大小、位置等属性。 2. Select(选择器):Select组件是下拉选择框,通常用于让用户从一系列选项中选择一个。VueBootstrap的Select...

    Bootstrap控件集合

    在“Bootstrap控件集合”中,我们主要关注的是Bootstrap中的各种控件,如特色下拉框和弹出框等。这些控件大大简化了网页设计和开发的过程,使得网页具有更好的用户体验。 1. **特色下拉框(Dropdown)**:Bootstrap...

Global site tag (gtag.js) - Google Analytics