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

共13个文件

js：8个

css：3个

rar：1个

5星 · 超过95%的资源需积分: 50 192 浏览量 2017-11-09 14:49:41 上传评论 1 收藏 141KB RAR 举报

在IT行业中，尤其是在前端开发领域，交互式的用户界面是至关重要的。"多选下拉列表"和"复选下拉列表"是常见的组件，用于提供用户在一组选项中进行多个选择的功能。这些组件通常用于数据筛选、配置设置或信息录入等场景。本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. **jQuery 多选插件**： jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理以及AJAX交互。在jQuery的基础上，开发者创建了许多插件来增强网页的交互性。"mutiselect"和"JqueryMultiselect2017"就是这样的插件，它们提供了高级的多选下拉列表功能。 2. **多选下拉列表**：这种组件通常包含一个可展开的下拉菜单，用户可以在其中勾选多个选项。与传统的单选下拉列表相比，多选下拉列表允许用户同时选择多个值，极大地提高了用户体验和效率。 3. **复选下拉列表**：复选下拉列表通常具有嵌套选项，即下拉菜单中的某些选项还可以展开为更具体的子选项。这种设计适用于层级结构的数据，例如地区选择时的国家-省份-城市三级联动。 4. **jQuery Mutiselect 插件**： Mutiselect是一个流行的jQuery插件，它提供了美观的多选下拉效果。它可能包含了自定义样式、搜索过滤、分页等功能，使得用户在大量选项中更容易找到并选择所需项。 5. **JqueryMultiselect2017**：这可能是另一个版本或变体的jQuery多选插件，可能包含2017年的更新和改进。这个插件可能提供新的特性，如优化的性能、更好的浏览器兼容性或新增的API方法。 6. **Demo**：提供的"demo"示例文件是了解和测试插件功能的关键。通过查看和运行这些示例，开发者可以直观地了解如何在实际项目中集成和定制这些多选下拉列表组件。 7. **集成到项目**：将这些插件整合到项目中，通常涉及引入jQuery库、下载插件文件、在HTML中添加相关标记，并通过JavaScript或jQuery代码调用插件方法，设置配置参数。 8. **应用场景**：这些组件广泛应用于各种项目，包括但不限于在线表单、数据分析工具、后台管理系统等。它们可以帮助用户快速、高效地完成多选项的选取。总结来说，"多选下拉列表"和"复选下拉列表"是提高用户交互体验的重要工具，而jQuery提供了丰富的插件资源，如"mutiselect"和"JqueryMultiselect2017"，帮助开发者实现这些功能。通过学习和掌握这些插件的使用，可以提升项目的用户界面质量和易用性。

资源推荐

资源详情

资源评论

收起资源包目录

Downloads.rar （13个子文件）

mutiselect

multiselectSrc

jquery.multiselect.filter.js 5KB

jquery.multiselect.min.js 10KB

jquery.multiselect.filter.min.js 3KB

jquery.multiselect.js 22KB

jquery.multiselect.css 2KB

basic.htm 3KB

jquery.ui.widget.js 15KB

jquery.ui.core.js 8KB

assets

ba.hashchange.js 1KB

prettify.css 710B

prettify.js 56KB

style.css 642B

JqueryMultiselect2017.rar 99KB

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery MultiSelect Widget Demo</title> <link rel="stylesheet" type="text/css" href="multiselectSrc/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="assets/style.css" /> <link rel="stylesheet" type="text/css" href="assets/prettify.css" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script type="text/javascript" src="ui/jquery.ui.core.js"></script> <script type="text/javascript" src="ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="assets/prettify.js"></script> <script type="text/javascript" src="multiselectSrc/jquery.multiselect.js"></script> <script type="text/javascript"> $(function(){ $("select").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', selectedList:4 }); }); function showValues() { var valuestr = $("#sela").multiselect("MyValues"); alert(valuestr); } </script> </head> <body id="test" onload="prettyPrint();"> <h2>Basic Demos</h2> <p>Both multiselects are created with the following one-liner. Optgroup support is built in out of the box:</p> <pre class="prettyprint"> $(function(){ $("select").multiselect(); }); </pre> <button onclick="showValues()">显示选取的值</button> <h3>Basic</h3> <p> <select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5"> <option value="V1">Option 1</option> <option value="V2">Option 2</option> <option value="V3">Option 3</option> <option value="option4">Option 4</option> <option value="option5">Option 5</option> <option value="option6">Option 6</option> <option value="option7">Option 7</option> <option value="option8">Option 8</option> <option value="option9">Option 9</option> <option value="option10">Option 10</option> <option value="option11">Option 11</option> <option value="option12">Option 12</option> </select> </p> <h3>With Optgroups</h3> <p>Click on an optgroup's heading to toggle the checked state of the entire group.</p> <p> <select name="example-optgroup" multiple="multiple" size="5"> <optgroup label="Group One"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </optgroup> <optgroup label="Group Two"> <option value="option4">Option 4</option> <option value="option5">Option 5</option> <option value="option6">Option 6</option> <option value="option7">Option 7</option> </optgroup> </select> </p> </body> </html>

评论收藏

内容反馈