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

select2是jQuery的一个下拉框插件,有单选、多选、搜索、禁用等功能。下面利用一个实例来说明select2多选框的使用方法,并获取选中的值,具体操作如下:

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

(0)

相关推荐

  • bootstrap-select实现下拉框多选效果

    在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 操作方法 01 最终实现的效果: 02 HTML代码: <div c ...

  • Axure RP 8怎么制作按钮控制下拉框选项?

    Axure RP 8怎么制作按钮控制下拉框选项? 1.打开Axure RP 8软件,在软件库中找到下拉框元件,拖一个到画布上,如下图所示: 2.再次在元件库中找到"主要按钮",拖一 ...

  • Axure RP 8如何制作按钮控制下拉框选项

    Axure RP 8如何制作按钮控制下拉框选项

  • 如何利用Axure RP 8设计软件按钮控制下拉框选项

    一般情况下,下拉框是有多个选项构成的,可以单选也可以多选:按钮是可以触发事件,操作其他元件发生变化,如单选按钮禁用启用.图片元件的显示和隐藏等.下面利用一个实例说明按钮控制下拉框选项,操作如下: 操作 ...

  • 使用Jquery如何操作下拉框控件?

    下拉框选择控件,在网页开发中,是经常使用到的一个控件.所以会对它有很频繁的操作,借助Jquery,我们可以很方便地对它进行操作控制. 下面一起来看些例子. 操作方法 01 先看下我们的例子HTML代码 ...

  • 在Excel单元格中使用下拉框的方法

    有时候我们只希望在Excel中的某个单元格中只允许输入某几个限定的数据,这时候我们就可能希望把该单元格设置成为下拉框的形式了,如下图所示: 下面就看看是怎么实现的吧. 1.我们选择一个单元格--数据- ...

  • WPS教你在表格中设置下拉框

    您还在为做表格时,不断的敲打键盘输入“是”或“否”而犯愁吗?您还在部门内部员工管理表格中,不断的重复的输入员工姓名而烦躁吗?不用着急,WPSOffice表格的“数据有效性”功能将帮助您解决这个问题。 ...

  • Excel中如何设置数据有效性通过下拉框选择数据

    打开对应的Excel文件,如下图所示,比如我们有性别和系别这两列相对取值比较固定,比如系别就是男或者女,在Sheet中的某块区域先输入男和女,以及系别信息,比如金融学、会计学等等,一般这些信息要放在s ...

  • 技巧:WPS教你在表格中设置下拉框

    您还在为做表格时,不断的敲打键盘输入“是”或“否”而犯愁吗?您还在部门内部员工管理表格中,不断的重复的输入员工姓名而烦躁吗?不用着急,WPS Office表格的“数据有效性”功能将帮助您解决这个问题。 ...