`
lydawen
  • 浏览: 471748 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery.multiselect 选中排序

 
阅读更多

jquery.multiselect 应该用得还是挺多,它有比较美观的界面,以及对html select控件进行多选扩充的实用功能。对于下拉列表选项较多时,如果将选中的项默认排到最前面,这将会大大提高用户使用便利。例如:


 

这样再次点开,还会是这种效果,像上面选项很多的情况,用户就不方便直观的看到自己选择了哪些选项。好在控件提供了event,我们可以在它展开之前进行“排序”,我们需要使用官方提供的beforeopen 事件,监听这个事件。

 

$("#yourId").multiselect({
			beforeopen: function(event, ui){
				var selected = $("select[id=yourId] option:selected"); 
				selected.remove(); 
				$("select[id=yourId]").prepend(selected);
				$("#yourId").multiselect('refresh');
			}
		});
 

 

假设yourId是你html select 的id,在document ready()事件中给这个select添加个事件监听后,我们再看效果:

 



multiselect 还有很多有意思的方法和事件,属性,具体可以看官方文档: 

 

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

 

 

  • 大小: 7.3 KB
  • 大小: 6.3 KB
分享到:
评论

相关推荐

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html <!-- HTML结构 --> <option value="1">Option 1 ...

    Jquery多选下拉列表插件jquery multiselect

    由于jQuery Multiselect使用了CSS来控制样式,因此你可以轻松地调整下拉框的外观,例如改变按钮的大小、颜色,或者调整选中项的样式。 ### 6. 扩展与兼容性 jQuery Multiselect插件通常与其他jQuery插件或框架(如...

    Jquery插件下拉复选multiSelect使用

    《jQuery插件multiSelect使用详解》 在网页开发中,我们常常会遇到需要处理大量选项的情况,例如用户需要从一个长长的列表中选择多个项目。这时,传统的多选下拉框可能就显得不够用了,因为它通常只能展示有限的几...

    jquery 复选框组件

    3. **拖放排序**:允许用户通过拖放调整选中项的顺序。 4. **事件监听**:如`select`和`deselect`事件,方便开发者根据用户选择执行相应逻辑。 5. **多语言支持**:通过设置`options`参数,可以实现多语言界面。 ##...

    jquery下拉选择插件multiselect

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

    11款下拉式多选框

    1. **jQuery.multiSelect**:这是一款基于jQuery的插件,提供了美观且功能丰富的下拉多选框解决方案。它支持多种自定义样式,如多列显示、搜索过滤、拖放排序等功能,极大地提升了用户体验。 2. **div + css + ...

    jquery实现带复选框的gridview

    这时可以使用jQuery的`.not()`方法来排除已经选中的复选框,确保一次只能有一个被选中。 在实际项目中,数据源通常不会硬编码在HTML中,而是通过Ajax从服务器动态获取。你可以使用jQuery的`$.ajax`或者`$.getJSON`...

    多选下拉框MultiSelect

    为了提供更丰富的交互体验,开发者常常使用JavaScript库如jQuery、React、Vue等来实现自定义的多选下拉框。这些库可以提供分页、搜索过滤、拖放排序等功能,并且支持响应式设计,使组件在不同设备上都能良好运行。 ...

    jquery 多选下拉框

    - **拖放排序**:允许用户通过拖放操作调整已选项目的顺序。 ### 注意事项 1. **兼容性**:虽然大部分现代浏览器都支持`<select multiple>`,但在某些老版本浏览器中可能存在问题。确保进行跨浏览器测试。 2. **...

    Jquery flexigrid插件 添加checkbox,(双击事件)onRowDblclick

    Flexigrid是一款基于jQuery的强大的数据网格插件,它提供了丰富的功能,如分页、排序、搜索和自定义列。在开发web应用时,我们经常需要处理大量的表格数据,这时Flexigrid就能派上用场,它使得数据显示更加灵活且...

    gridview 多选

    首先,GridView的基本概念是它是一个数据绑定控件,允许用户以网格视图展示数据,支持排序、分页、筛选等多种功能。在多选场景下,用户可以选取多个行或记录,这在数据操作如批量删除、编辑时非常实用。 实现...

    table表格样式利用jqgrid实现

    jqGrid是由Trirand公司开发的,基于jQuery的开源项目,它提供了数据网格的功能,支持数据分页、排序、过滤、编辑等多种操作。jqGrid的使用可以极大地提升表格的用户体验,使其在数据管理方面更加高效。 在实现表格...

    jqgrid详细资料

    jqGrid 提供多种事件,如 `loadComplete`(加载完成)、`beforeSelectRow`(行选中前)等,可以通过这些事件实现交互逻辑。 7. **排序和过滤** 默认情况下,jqGrid 可以对任何列进行排序,只需点击列头。通过 `...

    jqgriddocs

    它基于jQuery库,提供了丰富的功能,如数据分页、排序、过滤、编辑、导入导出以及自定义操作等。jqGrid文档PDF为开发者提供了详细的使用指南和技术参考,帮助他们更好地理解和应用这个工具。 **一、jQuery jqGrid ...

    使用div实现的复选选择控件

    为了克服这个问题,我们可以利用`div`元素配合JavaScript库如jQuery来构建自定义的复选选择控件。本篇将详细介绍如何使用`div`和jQuery实现一个复选选择功能。 首先,让我们了解`div`元素。`div`(division)是HTML...

    Jqgrid设置全选(选择)及获取选择行的值示例代码

    JqGrid是一款强大的jQuery插件,用于创建交互式的表格,具有数据分页、排序、过滤、编辑等功能。在处理大量数据时,用户可能需要选择表格中的多行,这就是所谓的“全选”功能。本文将详细介绍如何在JqGrid中实现全选...

    EasyUI-1.Datagrid 数据网格

    Datagrid 支持多种功能扩展,如行选中(`singleSelect` 或 `multiSelect`)、行编辑(`editable`)、排序(`sortable`)、分页(`pagination`)、搜索(`searchText` 和 `onSearch`)等。 5. **事件处理**: ...

    BootStrap TreeView使用实例详解

    使用 BootStrap TreeView需要引入相关的CSS和JavaScript文件,包括bootstrap.css、bootstrap-treeview.css、jquery.js、bootstrap.js和bootstrap-treeview.js等。在HTML文件中,需要创建一个container元素来承载树形...

    JQGrid4.0以上英文API文档

    - **行选择**:`selrow`获取选中行,`setSelection`设置选中行,`multiselect`启用多选。 **5. 行操作事件** - **事件处理**:如`onSelectRow`,`onSortCol`,`beforeSelectRow`等,允许自定义用户交互逻辑。 - **...

Global site tag (gtag.js) - Google Analytics