最近回学校忙着毕业的事情,好久没更新博客了,今天有个需求是需要实现单选框实现下拉多选的功能,刚开始接收到这个需求的时候,最开始想到的是自己写个css+js模拟实现的功能,但是发现应用到项目中效果不是很好,毕竟咱是搞java的,前端开发还是不要逞英雄了,所以决定上网查插件了。
找了一圈,就发现jquery multiselect符合要求,但是网上的教程,都讲的比较模糊,走了好多弯路,可能我是自己理解力差了点,搞了好久终于会用了(关键是依赖文件不能少)。
使用前,首先是插件需要依赖的js和css文件(这是必须的,不然会运行不正常)
这些依赖的文件都是jquery-ui的文件,少了images前端会报错,因为插件内部引用了images文件。
调用方法,使用起来就很简单了
<select class="selquery" id="chargeback_type"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <script type="text/javascript"> $("#chargeback_type").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', selectedText:'当前有 #个被选中' }); </script>
最关键还是取值问题,因为涉及到多选,网上的资料,都没涉及到取值问题,只好找官方文档了,文档里面有一个方法
var array_of_checked_values = $("select").multiselect("getChecked").map(function(){ return this.value; }).get();
就是它了,通过这个方法,可以获取到,多选的值。
最后附上Jquery multiselect文档地址:http://www.erichynds.com/blog/jquery-ui-multiselect-widget
相关推荐
jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限的空间内展现得既美观又实用。这个插件不仅提升了用户体验,同时也简化了开发者的代码实现,让复杂的多选功能...
**jQuery Multiselect插件详解** 在网页开发中,我们经常需要处理用户的选择操作,特别是当选项较多时,传统的HTML `<select>` 元素显得不够友好。为此,jQuery提供了一个强大的多选下拉列表插件——jQuery ...
《jQuery下拉选择插件Multiselect深度解析及源码修改指南》 在Web开发中,下拉选择框(Dropdown)是常见的用户交互元素,而jQuery的Multiselect插件则为这个基本元素带来了丰富的功能和优雅的外观。Multiselect插件...
总结,`jquery_multiselect` 是一款强大的 jQuery 多选下拉框插件,它提供了丰富的功能和良好的可定制性,能够帮助开发者轻松地实现美观且实用的多选交互。只需简单的配置和调用,即可将传统的下拉框升级为功能齐全...
总的来说,jQuery插件multiSelect是一款强大且灵活的多选下拉组件,通过合理的配置和使用,可以极大地提升多选操作的用户体验。无论是简单的多选功能,还是复杂的数据管理,它都能胜任。如果你的项目中需要处理多选...
2. 在页面中引入jQuery库和jQuery.multiSelect插件的JavaScript和CSS文件。 3. 使用jQuery选择器找到`<select>`元素,然后调用`.multiSelect()`方法,初始化插件。 例如: ```html 选项1 选项2 ... $...
JavaScript部分,使用jQuery调用Multiselect插件并设置参数: ```javascript $(function(){ $("select").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', ...
总的来说,jQuery multiSelect插件以其强大的功能和灵活性,为开发者提供了一个高效的下拉多选解决方案。只需简单的配置和调用,就能实现富有特色的多选效果,大大提升了用户界面的友好度。对于那些需要处理大量选项...
这时,jQuery.multiselect.js插件就派上了用场,它提供了一个强大且易于定制的多选下拉框解决方案。 一、jQuery.multiselect.js简介 jQuery.multiselect.js是基于流行的JavaScript库jQuery构建的,它扩展了...
**jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件,它针对HTML的`<select>`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好,使得用户在网页应用中进行多选操作时能有更佳的体验。它...
《jQuery下的多选下拉框:multiSelect插件详解》 在Web开发中,我们经常需要处理用户的选择操作,特别是当需要用户提供多个选项时,传统的HTML `<select>` 标签往往不能满足需求。这时,jQuery的插件multiSelect就...
jQuery下拉列表插件jQselectable是一款由日本开发者创建的高效工具,旨在为网页中的下拉选择元素提供丰富的交互性和美观的样式。这款插件是基于广泛使用的JavaScript库jQuery构建的,它允许开发者轻松地扩展标准...
《jQuery Multiselect Filter插件详解及其应用》 在网页开发中,多选下拉框是一种常见的用户交互元素,尤其在需要用户从大量选项中选择时。然而,传统的HTML `<select>` 元素在处理大量数据时往往显得力不从心,...
在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...
本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. **jQuery 多选插件**: jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理以及AJAX交互。在jQuery的基础上,开发者创建了许多插件来增强网页...
3. `jquery.multiselect.js` 和 `jquery.multiselect.min.js`:这是jQuery MultiSelect插件的核心JavaScript文件,它们包含了实现多选框增强功能的代码。未压缩版本便于调试,而压缩版本则用于生产环境以减少加载...
总的来说,MaxCombobox是一个功能强大且设计美观的jQuery下拉插件,集成了多选、单选和模糊查询等功能,是提升网页表单交互体验的优秀工具。无论是在小型项目还是大型应用中,它都能提供出色的表现。
本文将深入探讨jQuery MultiSelect插件,它能够帮助我们创建出具有分组、过滤等高级特性的多选下拉菜单。 jQuery MultiSelect 是一个基于jQuery的插件,它的主要目标是通过提供自定义样式和增强功能,来改进原生的...
对jquery的下拉框插件multiselect进行源码修改 ,实现下拉多选