`

JQuery下拉插件Jquery multiselect

阅读更多

      最近回学校忙着毕业的事情,好久没更新博客了,今天有个需求是需要实现单选框实现下拉多选的功能,刚开始接收到这个需求的时候,最开始想到的是自己写个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

 

 

  • 大小: 9.9 KB
1
0
分享到:
评论

相关推荐

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

    jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限的空间内展现得既美观又实用。这个插件不仅提升了用户体验,同时也简化了开发者的代码实现,让复杂的多选功能...

    Jquery多选下拉列表插件jquery multiselect

    **jQuery Multiselect插件详解** 在网页开发中,我们经常需要处理用户的选择操作,特别是当选项较多时,传统的HTML `&lt;select&gt;` 元素显得不够友好。为此,jQuery提供了一个强大的多选下拉列表插件——jQuery ...

    jquery下拉选择插件multiselect

    《jQuery下拉选择插件Multiselect深度解析及源码修改指南》 在Web开发中,下拉选择框(Dropdown)是常见的用户交互元素,而jQuery的Multiselect插件则为这个基本元素带来了丰富的功能和优雅的外观。Multiselect插件...

    多选下拉框(jquery_multiselect)

    总结,`jquery_multiselect` 是一款强大的 jQuery 多选下拉框插件,它提供了丰富的功能和良好的可定制性,能够帮助开发者轻松地实现美观且实用的多选交互。只需简单的配置和调用,即可将传统的下拉框升级为功能齐全...

    Jquery插件下拉复选multiSelect使用

    总的来说,jQuery插件multiSelect是一款强大且灵活的多选下拉组件,通过合理的配置和使用,可以极大地提升多选操作的用户体验。无论是简单的多选功能,还是复杂的数据管理,它都能胜任。如果你的项目中需要处理多选...

    jquery.multiSelect下拉多选

    2. 在页面中引入jQuery库和jQuery.multiSelect插件的JavaScript和CSS文件。 3. 使用jQuery选择器找到`&lt;select&gt;`元素,然后调用`.multiSelect()`方法,初始化插件。 例如: ```html 选项1 选项2 ... $...

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

    JavaScript部分,使用jQuery调用Multiselect插件并设置参数: ```javascript $(function(){ $("select").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', ...

    jquery multiSelect

    总的来说,jQuery multiSelect插件以其强大的功能和灵活性,为开发者提供了一个高效的下拉多选解决方案。只需简单的配置和调用,就能实现富有特色的多选效果,大大提升了用户界面的友好度。对于那些需要处理大量选项...

    jquery.multiselect.js多选下拉框选择代码

    这时,jQuery.multiselect.js插件就派上了用场,它提供了一个强大且易于定制的多选下拉框解决方案。 一、jQuery.multiselect.js简介 jQuery.multiselect.js是基于流行的JavaScript库jQuery构建的,它扩展了...

    jQuery UI Multiselect (jQuery UI 多选框)

    **jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件,它针对HTML的`&lt;select&gt;`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好,使得用户在网页应用中进行多选操作时能有更佳的体验。它...

    jquery下拉多选框multiSelect

    《jQuery下的多选下拉框:multiSelect插件详解》 在Web开发中,我们经常需要处理用户的选择操作,特别是当需要用户提供多个选项时,传统的HTML `&lt;select&gt;` 标签往往不能满足需求。这时,jQuery的插件multiSelect就...

    jQuery下拉列表插件 jQselectable

    jQuery下拉列表插件jQselectable是一款由日本开发者创建的高效工具,旨在为网页中的下拉选择元素提供丰富的交互性和美观的样式。这款插件是基于广泛使用的JavaScript库jQuery构建的,它允许开发者轻松地扩展标准...

    jquery.multiselect.filter.zip

    《jQuery Multiselect Filter插件详解及其应用》 在网页开发中,多选下拉框是一种常见的用户交互元素,尤其在需要用户从大量选项中选择时。然而,传统的HTML `&lt;select&gt;` 元素在处理大量数据时往往显得力不从心,...

    jquery插件实现下拉多选checkbox的效果

    在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...

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

    本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. **jQuery 多选插件**: jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理以及AJAX交互。在jQuery的基础上,开发者创建了许多插件来增强网页...

    jquery多选框

    3. `jquery.multiselect.js` 和 `jquery.multiselect.min.js`:这是jQuery MultiSelect插件的核心JavaScript文件,它们包含了实现多选框增强功能的代码。未压缩版本便于调试,而压缩版本则用于生产环境以减少加载...

    Juqery插件,下拉,支持多选,单选,模糊查询

    总的来说,MaxCombobox是一个功能强大且设计美观的jQuery下拉插件,集成了多选、单选和模糊查询等功能,是提升网页表单交互体验的优秀工具。无论是在小型项目还是大型应用中,它都能提供出色的表现。

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

    本文将深入探讨jQuery MultiSelect插件,它能够帮助我们创建出具有分组、过滤等高级特性的多选下拉菜单。 jQuery MultiSelect 是一个基于jQuery的插件,它的主要目标是通过提供自定义样式和增强功能,来改进原生的...

    jquery.multiSelect.js

    对jquery的下拉框插件multiselect进行源码修改 ,实现下拉多选

Global site tag (gtag.js) - Google Analytics