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和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html <!-- HTML结构 --> <option value="1">Option 1 ...
由于jQuery Multiselect使用了CSS来控制样式,因此你可以轻松地调整下拉框的外观,例如改变按钮的大小、颜色,或者调整选中项的样式。 ### 6. 扩展与兼容性 jQuery Multiselect插件通常与其他jQuery插件或框架(如...
《jQuery插件multiSelect使用详解》 在网页开发中,我们常常会遇到需要处理大量选项的情况,例如用户需要从一个长长的列表中选择多个项目。这时,传统的多选下拉框可能就显得不够用了,因为它通常只能展示有限的几...
3. **拖放排序**:允许用户通过拖放调整选中项的顺序。 4. **事件监听**:如`select`和`deselect`事件,方便开发者根据用户选择执行相应逻辑。 5. **多语言支持**:通过设置`options`参数,可以实现多语言界面。 ##...
《jQuery下拉选择插件Multiselect深度解析及源码修改指南》 在Web开发中,下拉选择框(Dropdown)是常见的用户交互元素,而jQuery的Multiselect插件则为这个基本元素带来了丰富的功能和优雅的外观。Multiselect插件...
1. **jQuery.multiSelect**:这是一款基于jQuery的插件,提供了美观且功能丰富的下拉多选框解决方案。它支持多种自定义样式,如多列显示、搜索过滤、拖放排序等功能,极大地提升了用户体验。 2. **div + css + ...
这时可以使用jQuery的`.not()`方法来排除已经选中的复选框,确保一次只能有一个被选中。 在实际项目中,数据源通常不会硬编码在HTML中,而是通过Ajax从服务器动态获取。你可以使用jQuery的`$.ajax`或者`$.getJSON`...
为了提供更丰富的交互体验,开发者常常使用JavaScript库如jQuery、React、Vue等来实现自定义的多选下拉框。这些库可以提供分页、搜索过滤、拖放排序等功能,并且支持响应式设计,使组件在不同设备上都能良好运行。 ...
- **拖放排序**:允许用户通过拖放操作调整已选项目的顺序。 ### 注意事项 1. **兼容性**:虽然大部分现代浏览器都支持`<select multiple>`,但在某些老版本浏览器中可能存在问题。确保进行跨浏览器测试。 2. **...
Flexigrid是一款基于jQuery的强大的数据网格插件,它提供了丰富的功能,如分页、排序、搜索和自定义列。在开发web应用时,我们经常需要处理大量的表格数据,这时Flexigrid就能派上用场,它使得数据显示更加灵活且...
首先,GridView的基本概念是它是一个数据绑定控件,允许用户以网格视图展示数据,支持排序、分页、筛选等多种功能。在多选场景下,用户可以选取多个行或记录,这在数据操作如批量删除、编辑时非常实用。 实现...
jqGrid是由Trirand公司开发的,基于jQuery的开源项目,它提供了数据网格的功能,支持数据分页、排序、过滤、编辑等多种操作。jqGrid的使用可以极大地提升表格的用户体验,使其在数据管理方面更加高效。 在实现表格...
jqGrid 提供多种事件,如 `loadComplete`(加载完成)、`beforeSelectRow`(行选中前)等,可以通过这些事件实现交互逻辑。 7. **排序和过滤** 默认情况下,jqGrid 可以对任何列进行排序,只需点击列头。通过 `...
它基于jQuery库,提供了丰富的功能,如数据分页、排序、过滤、编辑、导入导出以及自定义操作等。jqGrid文档PDF为开发者提供了详细的使用指南和技术参考,帮助他们更好地理解和应用这个工具。 **一、jQuery jqGrid ...
为了克服这个问题,我们可以利用`div`元素配合JavaScript库如jQuery来构建自定义的复选选择控件。本篇将详细介绍如何使用`div`和jQuery实现一个复选选择功能。 首先,让我们了解`div`元素。`div`(division)是HTML...
JqGrid是一款强大的jQuery插件,用于创建交互式的表格,具有数据分页、排序、过滤、编辑等功能。在处理大量数据时,用户可能需要选择表格中的多行,这就是所谓的“全选”功能。本文将详细介绍如何在JqGrid中实现全选...
Datagrid 支持多种功能扩展,如行选中(`singleSelect` 或 `multiSelect`)、行编辑(`editable`)、排序(`sortable`)、分页(`pagination`)、搜索(`searchText` 和 `onSearch`)等。 5. **事件处理**: ...
使用 BootStrap TreeView需要引入相关的CSS和JavaScript文件,包括bootstrap.css、bootstrap-treeview.css、jquery.js、bootstrap.js和bootstrap-treeview.js等。在HTML文件中,需要创建一个container元素来承载树形...
- **行选择**:`selrow`获取选中行,`setSelection`设置选中行,`multiselect`启用多选。 **5. 行操作事件** - **事件处理**:如`onSelectRow`,`onSortCol`,`beforeSelectRow`等,允许自定义用户交互逻辑。 - **...