在前端开发中，样式库是必不可少的一环。其中 Bootstrap 可谓是众所周知的样式库，它的布局、样式、插件等都是非常优秀的。而在 Bootstrap 的插件中，bootstrap-listbuilder 是一个很好用的列表构建插件，今天我们就来详细了解一下如何使用这个 npm 包，并通过示例代码来说明。
安装 Bootstrap 和 bootstrap-listbuilder
为了使用 bootstrap-listbuilder，你需要先安装 Bootstrap 整个库。
npm install bootstrap
然后再安装 bootstrap-listbuilder。
npm install bootstrap-listbuilder
使用 bootstrap-listbuilder
使用 bootstrap-listbuilder 的方式非常简单，只需要在页面中引入相关的 js 和 css 文件即可。以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ----------- ---------------
----- -------------------------------------------------------- -----------------
----- -------------------------------------------------------------------------------- -----------------
-------
------
---- ------------------
--- ---------------------- ----------- ------------
---- ------------
---- -----------------
------ ----------- ---------- ------------------- --------------- -----
----------------- --- --- --------
------- ------------------- -------- ------------------------------
------
---- --------------- -------------
------- ------------ ---------- ----------- --------------------------
------- --------------- ---------- ----------- -----------------------------
------
---- -----------------
------- ------------------ -------- ------------------------------
------ ------------- -------------------- ------------------------
------
------
------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
--------
-------------------------------------------
------------
------------- --- -----------
------------- --- -----------
------------- --- -----------
------------- --- -----------
--
----------------- ---
---
---------
-------
-------在这个示例代码中，我们使用了 Bootstrap 中的布局方式，并在输入框和列表中使用了 Bootstrap 的 form 样式。其中，我们在 available-list 中使用了 bootstrapListBuilder 方法。dataSource 选项用于设置列表中的选项。通过设置 bootstrapVersion，我们可以指定 bootstrap 的版本。如果你使用的是 Bootstrap 3，可以将其设为 3。
绑定事件以获取已选择值
你可以通过绑定事件来获取用户已选择的值。以下是如何绑定事件的示例代码：
$(document).ready(function () {
$('#selected-list').on('change', function (e) {
var selectedValues = $.map($('#selected-list option:selected'), function (item) {
return item.value;
});
$('#selected-values').val(selectedValues.join(', '));
});
});在这个示例代码中，我们绑定了 selected-list 元素的 change 事件。通过获取选择的 option 元素，我们可以获得选中的值，并通过逗号分隔符连接这些值，然后将这些值设置为 hidden 元素的值。
总结
bootstrap-listbuilder 可以帮助我们快速创建列表。通过阅读本教程，你应该可以了解如何使用这个 npm 包以及如何绑定事件以获取已选择的值。希望今天的文章可以对你有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cf2