Bootstrap-selectpicker多选框插件的demo源码资源-CSDN下载

共96个文件

js：76个

css：3个

xml：2个

需积分: 50 128 浏览量 2018-11-26 12:02:02 上传评论收藏 873KB RAR 举报

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，使得开发者可以快速构建美观且响应式的网页。Bootstrap-selectpicker是Bootstrap框架的一个扩展插件，专门用于增强原生的HTML选择器，使其具有更友好的用户体验和更丰富的功能。在这个"Bootstrap-selectpicker多选框插件的demo源码"中，我们可以学习到如何在项目中集成和使用这个插件。 Bootstrap-selectpicker提供了多选功能，允许用户在下拉菜单中选择多个选项。这在需要用户输入一组预设选项的情况下非常实用，例如在设置权限、选择兴趣爱好或者筛选条件时。多选框在网页设计中通常以复选框的形式出现，但通过这个插件，我们可以将其转化为更整洁、更易于操作的下拉式多选框。在源码中，你可能会看到以下关键部分： 1. **CSS引用**：Bootstrap-selectpicker需要引入其特定的CSS文件，通常是在Bootstrap的基础样式之后引入，以确保样式正确覆盖。 2. **JavaScript依赖**：为了实现交互功能，需要引入jQuery（因为Bootstrap通常基于jQuery）和bootstrap-selectpicker的JavaScript文件。确保这些脚本在页面的`<head>`或`</body>`标签之前加载，以便在DOM加载完成后执行。 3. **HTML结构**：一个基本的Bootstrap-selectpicker多选框需要一个`<select>`元素，其中包含一系列`<option>`元素。通过添加`data-live-search="true"`、`multiple`等属性，可以开启搜索功能和多选模式。 4. **初始化插件**：在文档加载完毕后，你需要使用JavaScript来初始化selectpicker插件，例如：`$('select').selectpicker();`。这样，普通的HTML选择器就会被转换成具有Bootstrap样式的可交互组件。 5. **事件处理**：你可能还需要监听用户的交互事件，如选择或取消选择选项。可以使用jQuery的`on()`方法绑定事件监听器，例如`$('select').on('changed.bs.select', function () {...})`。 6. **自定义配置**：Bootstrap-selectpicker允许通过JavaScript进行配置，如改变提示文本、设置最大选择项数等。你可以通过`$('select').selectpicker('setOptions', {option: value});`来设定。通过分析和学习这个demo源码，你可以了解到如何在实际项目中应用Bootstrap-selectpicker，提升用户界面的交互性和美观性。同时，这个插件还支持国际化、分组选项、禁用选项等功能，可以根据具体需求进一步探索和定制。记住，实践是检验真理的唯一标准，动手尝试并调整代码，你会对这个插件有更深入的理解。

资源推荐

资源详情

资源评论

收起资源包目录

Demo bootstrap-selectpicker.rar （96个子文件）

bootstrap-selectpicker

bootstrap-select.js.map 53KB

i18n

defaults-pt_BR.min.js 845B

defaults-nb_NO.min.js 876B

defaults-fi_FI.min.js 870B

defaults-kh_KM.min.js 1KB

defaults-hr_HR.js 2KB

defaults-ja_JP.min.js 885B

defaults-es_CL.js 1KB

defaults-hr_HR.min.js 1019B

defaults-lt_LT.js 2KB

defaults-ru_RU.js 1KB

defaults-tr_TR.js 2KB

defaults-nl_NL.js 1KB

defaults-it_IT.js 1KB

defaults-es_ES.js 1KB

defaults-fr_FR.min.js 1018B

defaults-sv_SE.min.js 888B

defaults-ko_KR.js 1KB

defaults-de_DE.js 2KB

defaults-zh_CN.min.js 811B

defaults-ua_UA.min.js 953B

defaults-en_US.min.js 942B

defaults-es_CL.min.js 849B

defaults-ro_RO.min.js 894B

defaults-fi_FI.js 2KB

defaults-hu_HU.js 1KB

defaults-pt_PT.js 1KB

defaults-fr_FR.js 2KB

defaults-zh_CN.js 1KB

defaults-hu_HU.min.js 840B

defaults-sv_SE.js 1KB

defaults-sl_SI.min.js 838B

defaults-fa_IR.js 1KB

defaults-ko_KR.min.js 901B

defaults-ar_AR.min.js 1KB

defaults-de_DE.min.js 994B

defaults-en_US.js 1KB

defaults-pt_BR.js 1KB

defaults-ro_RO.js 1KB

defaults-pt_PT.min.js 859B

defaults-eu.js 1KB

defaults-sk_SK.js 1KB

defaults-sk_SK.min.js 872B

defaults-ja_JP.js 1KB

defaults-da_DK.min.js 939B

defaults-it_IT.min.js 902B

defaults-cs_CZ.min.js 838B

defaults-ar_AR.js 2KB

defaults-eu.min.js 847B

defaults-da_DK.js 2KB

defaults-vi_VN.min.js 877B

defaults-tr_TR.min.js 934B

defaults-nl_NL.min.js 848B

defaults-bg_BG.js 2KB

defaults-cs_CZ.js 1KB

defaults-zh_TW.min.js 820B

defaults-id_ID.js 1KB

defaults-sl_SI.js 1KB

defaults-bg_BG.min.js 1KB

defaults-pl_PL.min.js 855B

defaults-kh_KM.js 2KB

defaults-nb_NO.js 2KB

defaults-et_EE.min.js 857B

defaults-ru_RU.min.js 989B

defaults-ua_UA.js 1KB

defaults-id_ID.min.js 799B

defaults-fa_IR.min.js 937B

defaults-lt_LT.min.js 1KB

defaults-pl_PL.js 1KB

defaults-zh_TW.js 1KB

defaults-et_EE.js 1KB

defaults-es_ES.min.js 849B

defaults-vi_VN.js 1KB

bootstrap-select.min.js 44KB

jquery-3.3.1.min.js 85KB

bootstrap-select.js 95KB

bootstrap.min.js 36KB

.idea

bootstrap-selectpicker.iml 458B

workspace.xml 15KB

modules.xml 296B

fonts

fontawesome-webfont.svg 434KB

glyphicons-halflings-regular.ttf 44KB

fontawesome-webfont.woff2 75KB

fontawesome-webfont.eot 162KB

FontAwesome.otf 132KB

fontawesome-webfont.woff 96KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.woff 23KB

fontawesome-webfont.ttf 162KB

css

bootstrap.min.css 118KB

bootstrap-select.css.map 22KB

bootstrap-select.min.css 10KB

bootstrap-select.css 11KB

test.html 134KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap-select.css"> <script src="js/bootstrap-select.js"></script> </head> <body> <select class="selectpicker" multiple> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 2">Burger, Shake and a Smile</option> <option title="Combo 3">Sugar, Spice and all things nice</option> </select> <script> var option = '<option data-tokens="QB_CHINA_DRUG_INFO" value="QB_CHINA_DRUG_INFO">QB_CHINA_DRUG_INFO</option><option data-tokens="QB_CHINA_SUSPECTOR" value="QB_CHINA_SUSPECTOR">QB_CHINA_SUSPECTOR</option><option data-tokens="QB_ENTERPRISE_INFO" value="QB_ENTERPRISE_INFO">QB_ENTERPRISE_INFO</option><option data-tokens="QB_CHINA_FLIGHT_INFO" value="QB_CHINA_FLIGHT_INFO">QB_CHINA_FLIGHT_INFO</option><option data-tokens="QB_CHINA_CAR_INFO" value="QB_CHINA_CAR_INFO">QB_CHINA_CAR_INFO</option><option data-tokens="QB_CHINA_PARCLE_INFO" value="QB_CHINA_PARCLE_INFO">QB_CHINA_PARCLE_INFO</option><option data-tokens="GA_DRUG_PERSON_INFO2" value="GA_DRUG_PERSON_INFO2">GA_DRUG_PERSON_INFO2</option><option data-tokens="META_FIELD" value="META_FIELD">META_FIELD</option><option data-tokens="QB_CHINA_LOCAL_INFO" value="QB_CHINA_LOCAL_INFO">QB_CHINA_LOCAL_INFO</option><option data-tokens="QB_CHINA_TEL_COMM_LOG" value="QB_CHINA_TEL_COMM_LOG">QB_CHINA_TEL_COMM_LOG</option><option data-tokens="QB_CM_COUNTRY_CD" value="QB_CM_COUNTRY_CD">QB_CM_COUNTRY_CD</option><option data-tokens="GATHER_APP_VIBER_MESSAGES" value="GATHER_APP_VIBER_MESSAGES">GATHER_APP_VIBER_MESSAGES</option><option data-tokens="GATHER_APP_VIBER_SUBGROUP" value="GATHER_APP_VIBER_SUBGROUP">GATHER_APP_VIBER_SUBGROUP</option><option data-tokens="GATHER_APP_VOXER_ACCOUNTS" value="GATHER_APP_VOXER_ACCOUNTS">GATHER_APP_VOXER_ACCOUNTS</option><option data-tokens="GATHER_APP_WAPP_ACCOUNTS" value="GATHER_APP_WAPP_ACCOUNTS">GATHER_APP_WAPP_ACCOUNTS</option><option data-tokens="GATHER_APP_WAPP_BUDDY" value="GATHER_APP_WAPP_BUDDY">GATHER_APP_WAPP_BUDDY</option><option data-tokens="GATHER_APP_WAPP_GMEMBER" value="GATHER_APP_WAPP_GMEMBER">GATHER_APP_WAPP_GMEMBER</option><option data-tokens="GATHER_APP_WAPP_GROUP" value="GATHER_APP_WAPP_GROUP">GATHER_APP_WAPP_GROUP</option><option data-tokens="GATHER_APP_WAPP_MESSAGES" value="GATHER_APP_WAPP_MESSAGES">GATHER_APP_WAPP_MESSAGES</option><option data-tokens="GATHER_APP_WEB_APPINDEX" value="GATHER_APP_WEB_APPINDEX">GATHER_APP_WEB_APPINDEX</option><option data-tokens="GATHER_APP_WEB_COOKIES" value="GATHER_APP_WEB_COOKIES">GATHER_APP_WEB_COOKIES</option><option data-tokens="GATHER_APP_WEB_HISTORY" value="GATHER_APP_WEB_HISTORY">GATHER_APP_WEB_HISTORY</option><option data-tokens="GATHER_APP_WEB_USERPWD" value="GATHER_APP_WEB_USERPWD">GATHER_APP_WEB_USERPWD</option><option data-tokens="GATHER_APP_WEIBO_ACCOUNTINFO" value="GATHER_APP_WEIBO_ACCOUNTINFO">GATHER_APP_WEIBO_ACCOUNTINFO</option><option data-tokens="GATHER_APP_WEIBO_APPINDEX" value="GATHER_APP_WEIBO_APPINDEX">GATHER_APP_WEIBO_APPINDEX</option><option data-tokens="GATHER_APP_WEIBO_FOLLOW" value="GATHER_APP_WEIBO_FOLLOW">GATHER_APP_WEIBO_FOLLOW</option><option data-tokens="GATHER_APP_WEIBO_INFO" value="GATHER_APP_WEIBO_INFO">GATHER_APP_WEIBO_INFO</option><option data-tokens="GATHER_APP_WEIBO_PRIVATELETTER" value="GATHER_APP_WEIBO_PRIVATELETTER">GATHER_APP_WEIBO_PRIVATELETTER</option><option data-tokens="GATHER_APP_WIFICONNECT" value="GATHER_APP_WIFICONNECT">GATHER_APP_WIFICONNECT</option><option data-tokens="GATHER_APP_WIFITRACK" value="GATHER_APP_WIFITRACK">GATHER_APP_WIFITRACK</option><option data-tokens="GATHER_COUNT_RESOURCES" value="GATHER_COUNT_RESOURCES">GATHER_COUNT_RESOURCES</option><option data-tokens="GATHER_INFO_PREFIX" value="GATHER_INFO_PREFIX">GATHER_INFO_PREFIX</option><option data-tokens="GATHER_PERSON" value="GATHER_PERSON">GATHER_PERSON</option><option data-tokens="GATHER_PERSON_PHONE" value="GATHER_PERSON_PHONE">GATHER_PERSON_PHONE</option><option data-tokens="GATHER_PHONE" value="GATHER_PHONE">GATHER_PHONE</option><option data-tokens="GATHER_PHONE_ACCOUNT" value="GATHER_PHONE_ACCOUNT">GATHER_PHONE_ACCOUNT</option><option data-tokens="GATHER_PHONE_ADDR" value="GATHER_PHONE_ADDR">GATHER_PHONE_ADDR</option><option data-tokens="GATHER_PHONE_ADDR_VALUE" value="GATHER_PHONE_ADDR_VALUE">GATHER_PHONE_ADDR_VALUE</option><option data-tokens="GATHER_PHONE_CALENDAR" value="GATHER_PHONE_CALENDAR">GATHER_PHONE_CALENDAR</option><option data-tokens="GATHER_PHONE_MESSAGE" value="GATHER_PHONE_MESSAGE">GATHER_PHONE_MESSAGE</option><option data-tokens="GATHER_PHONE_MMS_PART" value="GATHER_PHONE_MMS_PART">GATHER_PHONE_MMS_PART</option><option data-tokens="GATHER_QQ_FRIEND" value="GATHER_QQ_FRIEND">GATHER_QQ_FRIEND</option><option data-tokens="GATHER_QQ_GROUPS" value="GATHER_QQ_GROUPS">GATHER_QQ_GROUPS</option><option data-tokens="GATHER_QQ_MESSAGE" value="GATHER_QQ_MESSAGE">GATHER_QQ_MESSAGE</option><option data-tokens="GATHER_QQ_NUMS" value="GATHER_QQ_NUMS">GATHER_QQ_NUMS</option><option data-tokens="GATHER_QQ_SUBGROUPS" value="GATHER_QQ_SUBGROUPS">GATHER_QQ_SUBGROUPS</option><option data-tokens="GATHER_STATISTIC_RUNTIME" value="GATHER_STATISTIC_RUNTIME">GATHER_STATISTIC_RUNTIME</option><option data-tokens="GATHER_STATISTIC_UNIT" value="GATHER_STATISTIC_UNIT">GATHER_STATISTIC_UNIT</option><option data-tokens="GATHER_STATISTIC_UNIT_MEMBER" value="GATHER_STATISTIC_UNIT_MEMBER">GATHER_STATISTIC_UNIT_MEMBER</option><option data-tokens="GNET_CODE_GATHER_CONTROLS" value="GNET_CODE_GATHER_CONTROLS">GNET_CODE_GATHER_CONTROLS</option><option data-tokens="GNET_CODE_GATHER_PERSONTYPES" value="GNET_CODE_GATHER_PERSONTYPES">GNET_CODE_GATHER_PERSONTYPES</option><option data-tokens="GNET_CODE_GATHER_SOURCE" value="GNET_CODE_GATHER_SOURCE">GNET_CODE_GATHER_SOURCE</option><option data-tokens="GNET_CODE_HOLIDAY" value="GNET_CODE_HOLIDAY">GNET_CODE_HOLIDAY</option><option data-tokens="GNET_CODE_KCT_JZZT" value="GNET_CODE_KCT_JZZT">GNET_CODE_KCT_JZZT</option><option data-tokens="GNET_CODE_MAP_TYPE" value="GNET_CODE_MAP_TYPE">GNET_CODE_MAP_TYPE</option><option data-tokens="GNET_CODE_MICROMSG_KEY" value="GNET_CODE_MICROMSG_KEY">GNET_CODE_MICROMSG_KEY</option><option data-tokens="GNET_CODE_MICROMSG_MSGTYPE" value="GNET_CODE_MICROMSG_MSGTYPE">GNET_CODE_MICROMSG_MSGTYPE</option><option data-tokens="GNET_CODE_MICROMSG_STATUS" value="GNET_CODE_MICROMSG_STATUS">GNET_CODE_MICROMSG_STATUS</option><option data-tokens="GNET_CODE_OS" value="GNET_CODE_OS">GNET_CODE_OS</option><option data-tokens="GNET_CODE_PHONE_BELONG" value="GNET_CODE_PHONE_BELONG">GNET_CODE_PHONE_BELONG</option><option data-tokens="IMPORT_LOG" value="IMPORT_LOG">IMPORT_LOG</option><option data-tokens="KCT_HX_CONFIG" value="KCT_HX_CONFIG">KCT_HX_CONFIG</option><option data-tokens="LOG_JOB_RESULT" value="LOG_JOB_RESULT">LOG_JOB_RESULT</option><option data-tokens="MODEL_QUANTITY_BY_DATE_LOG" value="MODEL_QUANTITY_BY_DATE_LOG">MODEL_QUANTITY_BY_DATE_LOG</option><option data-tokens="MY_BD_ALWW_FRIEND_INFO" value="MY_BD_ALWW_FRIEND_INFO">MY_BD_ALWW_FRIEND_INFO</option><option data-tokens="MY_BD_ALWW_INFO" value="MY_BD_ALWW_INFO">MY_BD_ALWW_INFO</option><option data-tokens="MY_BD_CA

评论收藏

内容反馈