`

jQuery ui 多选下拉

 
阅读更多
下载及代码:http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/index.htm#filter

api(参数):http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Demo:http://www.erichynds.com/examples/jquery-multiselect/examples.htm

效果:



自己使用:



常用及汉化:
$("#assignUserId").multiselect({ 
		header: "选择处理人",
		noneSelectedText: "未选择",
		checkAllText: "选择全部",
		uncheckAllText: "取消全部",
		minWidth:150,
		selectedText: function(numChecked, numTotal, checkedItems){
			return $(checkedItems[0]).next('span').html();
		}
	});
	
	
	var array_of_checked_values = $("#assignUserId").multiselect("getChecked").map(function(){
		   return this.value;    
		}).get();
	



默认选中:

$("select option:nth-child(1), select option:nth-child(3)").attr("selected", "selected");
$("select").multiselect("refresh");


获得选中:
var array_of_checked_values = $("#assignUserId").multiselect("getChecked").map(function(){
   return this.value;   
}).get();





配置:
defaultMultiselectOptions : {
		header: false,
		noneSelectedText: "请选择",
		checkAllText: "选择全部",
		uncheckAllText: "取消全部",
		minWidth:150,
		selectedText: function(numChecked, numTotal, checkedItems){
			return  $(checkedItems).map(function(){
				 return $(this).next('span').html();    
			}).get();
		}
	}



  • 大小: 11.2 KB
  • 大小: 4.9 KB
  • 大小: 5.4 KB
分享到:
评论

相关推荐

    轻量级Jquery下拉多选

    "轻量级Jquery下拉多选"是一种高效的解决方案,它利用jQuery库来创建功能强大的多选下拉菜单,提供了用户友好的界面和简洁的API。本文将深入探讨这个主题,解析其实现原理,并给出实际应用中的建议。 1. **jQuery...

    jquery.combotree 多选下拉树

    **jQuery Combotree 多选下拉树** jQuery Combotree 是一个专为Bootstrap设计的组件,它将传统的下拉菜单与树形结构相结合,提供了一种交互式的多选功能。这个组件基于jQuery库和zTree插件,使得在网页应用中能够...

    angularjs ui-select2 多选下拉所需资源文件

    AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,包括单选和多选下拉列表。 **一、AngularJS与ui-select2简介** AngularJS通过数据绑定和依赖...

    利用jQuery实现多选,分栏比较

    本教程将围绕“利用jQuery实现多选,分栏比较”这一主题展开,结合Bootstrap的select组件,来创建一个既实用又美观的多选下拉菜单。 首先,我们需要理解jQuery的选择器和方法。jQuery选择器类似于CSS选择器,可以...

    jQuery UI Multiselect (jQuery UI 多选框)

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

    Jquery实现下拉框多选

    在描述中提到的"ehynds-jquery-ui-multiselect-widget-03cc76d"很可能是一个基于jQuery UI的多选下拉框插件。这个插件允许用户在一个下拉菜单中选择多个项,提供了丰富的自定义样式和功能,如渐进渐出效果、分组选择...

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

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

    多款多选下拉插件集合

    "多款多选下拉插件集合"的主题聚焦于一种常见的UI组件,即多选下拉菜单,它允许用户从一系列选项中选择多个条目,通常通过一个可展开的下拉列表实现。这种组件常见于表单、筛选器或者配置设置等场景,极大地提高了...

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

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

    select模拟多选下拉

    因此,开发者通常会通过JavaScript或者一些前端框架(如jQuery、Vue、React等)来模拟更灵活、功能更丰富的多选下拉组件。 这个"select模拟多选下拉"功能的主要特点包括: 1. **多选支持**:用户可以选取多个选项...

    含checkbox的多选下拉组件

    "含checkbox的多选下拉组件"是一个这样的工具,它为网页中的选择操作提供了更直观、更友好的方式。这样的组件通常用于在有限的空间内展示多个可选项目,而不会让页面显得拥挤或混乱。 在传统的下拉框中,用户只能...

    jquerymultiselectjs是一款基于jQueryUI的多项选择下拉列表框组件

    jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它方法。

    用jQuery实现可输入多选下拉组合框实例代码

    在介绍如何使用jQuery实现一个可输入的多选下拉组合框的实例代码时,我们需要了解以下知识点: 1. **jQuery的基础知识:** jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一种简洁的方式,改变了...

    jquery实现的多选下拉框

    在这里,我们将深入探讨jQuery实现的多选下拉框,特别关注"ehynds-jquery-ui-multiselect-widget-1.10-3"这个开源项目。 首先,"ehynds-jquery-ui-multiselect-widget"是由Eric Hynds开发的一个jQuery插件,它扩展...

    ui组件之input多选下拉实现方法(带有搜索功能)

    HTML 结构是实现多选下拉组件的基础。在示例中,`<div>` 结构包含了`<label>`(用于展示提示文本),`<input>`(用户输入和搜索),以及两个嵌套的`<div>`(一个用于动态添加选中项的`<span>`,另一个包含下拉列表`...

    多选下拉列表修改(multiCombo)

    在IT行业中,多选下拉列表(MultiComboBox)是一种常见的用户界面组件,它允许用户从一个下拉菜单中选择多个选项。这篇博客“多选下拉列表修改(multiCombo)”可能探讨了如何自定义或优化这个功能,以提高用户体验...

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

    `jqueryUi.multiselect`就是这样一个插件,它为用户提供了便捷的多选功能,适用于那些需要在下拉菜单中进行批量选择的场景。本文将详细介绍这个插件的特性、用法以及如何将其集成到项目中。 一、插件简介 `jquery...

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

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

    jqery实现下拉多选

    `ui`目录通常存放用户界面相关的资源,如CSS样式和图像,这些资源可能被用来定义下拉多选组件的外观和交互效果,例如滑动动画和过渡效果。 实现这样一个下拉多选组件,关键在于使用jQuery的事件监听和DOM操作。例如...

    JS多选下拉

    综上所述,JS多选下拉是一个涉及前端交互、数据绑定和UI设计的重要知识点,可以通过各种方法和工具进行实现和优化,以满足不同项目的需要。在实际应用中,开发者需要根据项目需求和性能考虑,选择合适的实现方案。

Global site tag (gtag.js) - Google Analytics