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

一般情况下，select下拉框是只能选择，不能用来输入内容的。当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项，在输入信息项时，不改变select下拉框中原有的信息项。

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

第一步，创建静态页面select.html，引入select2相关的css和js文件，并引入jquery核心js

第二步，在body标签内插入select元素，设置属性multiple和class，宽度为300px

第三步，初始化select2插件，需要调用select2()方法

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

第五步，编写按钮点击事件，事件里获取多选下拉框值和文本内容

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

可以输入的下拉框实现方法

1.input和select的组合，主要难度在样式的调整，只要将样式调整好就可以

2.选择框中有两个值“爬楼高手”和“隔壁老尤条”，select标签中有一个onchange()方法，当我们选择某一个值的时候，会将选中的值赋值给input框

3.选中“隔壁老尤条”，input输入框中显示“隔壁老尤条

4.选中“爬楼高手”，input输入框显示“爬楼高手”

5.输入”fffffffff”,input输入框中显示“fffffffff”

6.head中内容，主要是样式的调整

7.body中内容，定义了一个输入框，一个下拉框

8.js脚本，主要是将select选中的值赋值给input框

大部分人在搜索某一个关键词的时候，其实他并不知道该如何组织语言以便更加精确的达到搜索目的，下拉框就为他提供了便捷。如果搜索词比较长的话、这样子也节约了时间，所以下拉框是很便捷的。举个例子：假设用户要qq2011，则他将直接输入并搜索qq2011，而从百度实际搜索数据进行判断“qq2011官方正式版免费“这个词的搜索量是最大的，造成这个现象的功劳全部来自百度下拉。据国内某权威调查公司的分析数据显示，百度下拉菜单可以有效的提高输入效率39.8%，用户满意度达91.3%。同时，下拉菜单在引导用户发现热点，拓展视野，轻松搜索方面，带给用户超出想像的搜索体验。

可以输入的下拉框的实现方法其实就是select选择框和input输入框的组合在select选择框中加入onchange方法，在js中将select选中的值赋值给input输入框，如果大家还想了解更多与之有关的信息，欢迎关注我们文军营销的官网。

推荐阅读

下拉框选中事件 如何使select2插件下拉框多选并获取选中的值 |...第一步,创建静态页面select.html,引入select2相关的css和js文件,并引入jquery核心js 第二步,在body标签内插入select元素,设置属性multiple和class,宽度为300px 第三步,初始化select2插件,需要调用select2()方法 第四步,为了演示获取下拉框值,这里利用button按钮点击事件,在select下方插入一个