在Web开发中，Select下拉框是常见的UI组件之一。然而，原生的Select下拉框通常样式单调且不够灵活。为了让用户能够更好地使用Select下拉框，jQuery社区中出现了许多插件，其中jquery.editable-select是一个非常实用的插件。
什么是jquery.editable-select？
jquery.editable-select是一款基于jQuery库的Select下拉框插件。它可以使得原生的Select下拉框变得更加美观、易用和自定义化。jquery.editable-select支持搜索、多选、可编辑等功能，并且它还提供了大量的配置选项来满足不同场景下的需求。
如何使用jquery.editable-select？
使用jquery.editable-select非常简单，只需要引入jquery库和jquery.editable-select插件即可。以下是一个基本的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------- ---------------
----- ---------------- ----------------------------------------------------------------------------------------------------------
-------
------
------- --------------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------------------
--------
---------------------------- -
--------------------------------
---
---------
-------
-------在上述示例中，我们首先引入了jquery库和jquery.editable-select插件的CSS文件和JS文件。然后，在页面加载完成后，我们调用$('#mySelect').editableSelect()方法对Select下拉框进行初始化即可。
jquery.editable-select的配置选项
jquery.editable-select提供了许多配置选项，可以根据具体需求进行设置。以下是一些常用的配置选项：
- effects：下拉框弹出的效果，默认为slideDown。
- duration：下拉框弹出的动画持续时间，默认为fast。
- filter：是否启用搜索功能，默认为true。
- onSelect：选择选项时触发的回调函数。
- onHide：隐藏下拉框时触发的回调函数。
以下是一个完整的配置示例：
-- -------------------- ---- -------
---------------------------- -
-------------------------------
-------- -------
--------- -------
------- -----
--------- ------------------ -
------------------ - -----------------
--
------- ---------- -
----------------------
-
---
---jquery.editable-select的高级用法
jquery.editable-select不仅仅支持基本的Select下拉框功能，还有一些比较高级的用法。以下是一些例子：
- 多选
-- -------------------- ---- -------
---------------------------- -
-------------------------------
--------- -----
------- -----
------- ---------- -
--- ----- - -----------------------------------------------
------------------- - ------------ - -------
--
------- ---------- -
--- ----- - -----------------------------------------------
------------------- - ------------ - -------
-
---
---在上述示例中，我们设置multiple为true即可实现多选功能。同时，我们在onShow和onHide回调函数中获取当前选中的选项并输出。
- 从JSON数据中生成下拉框
$(document).ready(function() {
$.getJSON('
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/882) ，转载请注明来源
[https://www.javascriptcn.com/post/882](https://www.javascriptcn.com/post/882)