在前端开发中，我们经常需要处理下拉框选择的问题。使用 force-list-option 包可以很方便的实现下拉列表强制选项功能。本文将详细介绍 force-list-option 的使用方法。
安装
我们可以使用 npm 在项目中安装 force-list-option：
npm install force-list-option
引用
在需要使用的代码中引用 force-list-option：
import ForceListOption from 'force-list-option';
使用
现在我们假设你有一个下拉列表，你的目标是强制用户必须选择其中一个选项，不能留空。代码如下：
<select> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> </select>
现在我们用 force-list-option 的方法来实现这个功能。
首先，在 JavaScript 中实例化 ForceListOption，参数是 select 元素：
const forceListOption = new ForceListOption(document.querySelector('select'));这时候你可以提交你的表单，但是你发现可以提交的。这个时候你需要调用 forceListOption.check() 方法检查你的下拉列表是否选中了一项：
-- -------------------- ---- -------
----- --------------- - --- --------------------------------------------------
----- ---- - -------------------------------
------------------------------- ------- -- -
-- -------------------------- -
-----------------------
-----------------
-
---这时候，当你没有选择下拉框中的可选项时，无法提交表单。
示例
为了更好的展示 force-list-option 的用法，这里提供一个完整示例。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------ ---- ------ ---------------
-------
------
------
------ -----------------------------------
------- ------------------
------- ---------------------
------- -------------------------
------- --------------------------
------- --------------------------
---------
------- -------------------------
-------
------- ------------------------------------------------------------------------------
--------
----- --------------- - --- ---------------------------------------------------------
----- ---- - -------------------------------
------------------------------- ------- -- -
-- -------------------------- -
-----------------------
-----------------
-
---
---------
-------
-------总结
force-list-option 是方便的一个 npm 包，可以让我们方便地处理下拉列表选择的问题，并且可以很方便在表单校验的时候使用。学会使用 force-list-option 可以让你更有效率的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055db881e8991b448db75a