如何使select2插件下拉框多选并获取选中的值

作者:小小谷 | 创建时间: 2023-07-16
select2是jQuery的一个下拉框插件,有单选、多选、搜索、禁用等功能。下面利用一个实例来说明select2多选框的使用方法,并获取选中的值,具体操作如下:...
如何使select2插件下拉框多选并获取选中的值

操作方法

第一步,创建静态页面select.html,引入select2相关的css和js文件,并引入jQuery核心js,如下图所示:

第二步,在body标签内插入select元素,设置属性multiple和class,宽度为300px,如下图所示:

第三步,初始化select2插件,需要调用select2()方法,如下图所示:

第四步,为了演示获取下拉框值,这里利用button按钮点击事件,在select下方插入一个button按钮,如下图所示:

第五步,编写按钮点击事件,事件里获取多选下拉框值和文本内容,如下图所示:

第六步,在浏览器中进行预览,点击“取值”按钮,会看到打印下拉框选择的值和文字,如下图所示:

温馨提示

熟悉select2插件的用法
了解下拉框单选和多选的区别
点击展开全文

更多推荐