`

Jquery插件下拉复选multiSelect使用

阅读更多
工程出现下拉复选功能,把自己在网上查询的东西总结一下》》》》》》》》》》

1、首先引入Jquery库和要用的插件multiSelect

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script><!--在工程里面已经引入就不用再引用了-->
		<script src="../jquery.bgiframe.min.js" type="text/javascript"></script><!--看具体工程需要引入-->
		<script src="../jquery.multiSelect.js" type="text/javascript"></script>
		<link href="../jquery.multiSelect.css" rel="stylesheet" type="text/css" />


2、html代码

<select id="selectDept" name="selectDept" style="width: 200px;" [color=red]multiple="multiple"[/color]>
     <option value="">--请选择--</option>
          <c:forEach items="${depList}" var="dep" >			
                <option value="${dep.organiseID}" >${dep.organiseName }</option>
          </c:forEach>
</select>

<input type="hidden" name="organiseIdStr" id="organiseIdStr" value=""><!--添加一个隐藏域,获取选择的下拉列value-->



3、初始化multiSelect
$(document).ready(function(){  
	$("#selectDept").multiSelect({    
        selectAll: false,   
        oneOrMoreSelected: '*',   
        selectAllText: '全选',   
        noneSelected: '--请选择--'  
    }, function(){   <!--回调函数-->   
    	$("#organiseIdStr").val($("#selectDept").selectedValuesString());
    }); 
});



4、关于下拉列表的初始化
没有找到可用的函数,自己添加要初始化菜单的select属性就行。
简单使用了一下
0
0
分享到:
评论

相关推荐

    jquery.multiselect 下拉多选插件 下拉复选框插件

    《jQuery Multiselect:打造高效的下拉复选框体验》 在网页开发中,用户界面的交互性和易用性是至关重要的。jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限...

    jquery下拉选择插件multiselect

    1. **多选模式**:Multiselect的核心功能就是实现多选,用户可以通过点击选项前的复选框来选择或取消选项。 2. **分组显示**:对于包含多个类别的选项,可以将其分组显示,每个组有自己的标题,提高用户浏览效率。 ...

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    jQuery Multiselect是一款基于jQuery UI库的插件,用于创建功能丰富的多选下拉列表。这款插件提供了多种特性,使得在网页中实现复杂的下拉列表交互变得更加便捷。以下是对jQuery Multiselect功能的详细介绍: 1. **...

    jquery实现的下拉复选框信息

    总结来说,jQuery实现的下拉复选框通过使用特定的jQuery插件,可以方便地为网页增加多选功能的下拉列表,提高用户交互体验。同时,插件通常提供了丰富的配置选项和扩展功能,使得定制化变得更加容易。在开发过程中,...

    jquery 复选框组件

    本篇文章将详细探讨jQuery中的复选框组件,特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中,复选框通常使用`&lt;input type="checkbox"&gt;`标签创建。jQuery允许开发者通过选择器(Selectors...

    js下拉复选框控件,超经典,用了就知道了。

    总的来说,js下拉复选框控件是提升网页交互体验的有效工具,而jQuery UI的多选框插件则为开发者提供了一个强大且灵活的解决方案。通过深入理解和熟练运用这些工具,可以创建出既美观又实用的用户界面。

    自己封装好的下拉框多选插件jqueryUi.multiselect

    `jqueryUi.multiselect`是一个基于jQuery UI库的下拉框多选插件,它提供了一种美观且易于使用的多选方式,通过复选框的形式展示选项,使得用户可以快速勾选或取消多个选项。由于在GitHub上找到的完整版本较少,...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    Mutiselect是一个流行的jQuery插件,它提供了美观的多选下拉效果。它可能包含了自定义样式、搜索过滤、分页等功能,使得用户在大量选项中更容易找到并选择所需项。 5. **JqueryMultiselect2017**: 这可能是另一...

    下拉复选框

    在网页设计和开发中,"下拉复选框"是一种常用的交互元素,它结合了下拉菜单和复选框的功能,允许用户在一个列表中选择一个或多个选项。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果...

    前端项目-jquery-ui-multiselect-widget.zip

    "前端项目-jquery-ui-multiselect-widget.zip" 提供了一个强大的工具,它是一个基于jQuery UI库的多选下拉列表插件,名为jQuery UI Multiselect Widget。这个插件能够将普通的多选输入框转化为一个美观且功能丰富的...

    javascript下拉多选框复选框

    在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,尤其是jQuery的multiselect插件。 首先,让我们了解下拉多选框(Dropdown)和复选框(Checkbox)的...

    jquery多选框

    4. `jquery.bgiframe.js`:这是一个jQuery插件,主要用于解决在IE6和IE7下浮动元素与背景图片重叠的问题,确保多选框在这些旧版浏览器中的正确显示。 5. `前端页面.text`:这个文件很可能包含了一个或多个示例页面...

    下拉多选框(jquery)

    5. **CSS和JavaScript集成**:将jQuery插件与页面上的其他元素和样式结合,可能需要调整CSS以适应新的多选下拉框样式,同时确保JavaScript正确加载并调用了插件初始化方法。 6. **跨浏览器兼容性**:因为提到插件...

    jQuery下拉列表插件 jQselectable

    在多选模式下,用户可以同时选择多个选项,这对于需要处理复选数据的场景非常有用。同时,插件还提供了便捷的方法来获取或设置已选中的值,方便开发者在后端或前端处理这些数据。 此外,jQselectable也具备良好的可...

    jQuery MultiSelect 美化增强的多选下拉框.rar

    5. **单选和复选**:jQuery MultiSelect 支持单选模式,即一次只能选择一个选项,同时也支持复选模式,允许多个选项同时被选中。 6. **事件监听**:该插件提供了一系列的事件,如`change`、`open`、`close`等,使得...

    bootstrap下拉多选框

    该插件通过JavaScript和jQuery库来实现,允许用户在下拉菜单中进行多项选择,并可以以复选框的形式显示这些选项。 1. **安装与引入** 首先,你需要在项目中引入Bootstrap的基础CSS和JS文件,以及jQuery库。然后,...

    jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    标题“jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)”和描述“Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框,...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    7. **jQuery插件或库** 如果项目已经使用了jQuery,可以考虑使用现有的插件,如`multiselect.js`或`select2`,它们提供了预封装的多选下拉框解决方案。 以上就是关于“html多选下拉框,CheckBox的Select组件”的...

Global site tag (gtag.js) - Google Analytics