一般情況下，select下拉框是只能選擇，不能用來輸入內(nèi)容的。當(dāng)select下拉框中沒有要選擇的信息項時，可以直接在select中輸入自己想要得信息項，在輸入信息項時，不改變select下拉框中原有的信息項。

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

第一步，創(chuàng)建靜態(tài)頁面select.html，引入select2相關(guān)的css和js文件，并引入jquery核心js

第二步，在body標(biāo)簽內(nèi)插入select元素，設(shè)置屬性multiple和class，寬度為300px

第三步，初始化select2插件，需要調(diào)用select2()方法

第四步，為了演示獲取下拉框值，這里利用button按鈕點擊事件，在select下方插入一個button按鈕

第五步，編寫按鈕點擊事件，事件里獲取多選下拉框值和文本內(nèi)容

第六步，在瀏覽器中進(jìn)行預(yù)覽，點擊“取值”按鈕，會看到打印下拉框選擇的值和文字

可以輸入的下拉框?qū)崿F(xiàn)方法

1.input和select的組合，主要難度在樣式的調(diào)整，只要將樣式調(diào)整好就可以

2.選擇框中有兩個值“爬樓高手”和“隔壁老尤條”，select標(biāo)簽中有一個onchange()方法，當(dāng)我們選擇某一個值的時候，會將選中的值賦值給input框

3.選中“隔壁老尤條”，input輸入框中顯示“隔壁老尤條

4.選中“爬樓高手”，input輸入框顯示“爬樓高手”

5.輸入”fffffffff”,input輸入框中顯示“fffffffff”

6.head中內(nèi)容，主要是樣式的調(diào)整

7.body中內(nèi)容，定義了一個輸入框，一個下拉框

8.js腳本，主要是將select選中的值賦值給input框

大部分人在搜索某一個關(guān)鍵詞的時候，其實他并不知道該如何組織語言以便更加精確的達(dá)到搜索目的，下拉框就為他提供了便捷。如果搜索詞比較長的話、這樣子也節(jié)約了時間，所以下拉框是很便捷的。舉個例子：假設(shè)用戶要qq2011，則他將直接輸入并搜索qq2011，而從百度實際搜索數(shù)據(jù)進(jìn)行判斷“qq2011官方正式版免費“這個詞的搜索量是最大的，造成這個現(xiàn)象的功勞全部來自百度下拉。據(jù)國內(nèi)某權(quán)威調(diào)查公司的分析數(shù)據(jù)顯示，百度下拉菜單可以有效的提高輸入效率39.8%，用戶滿意度達(dá)91.3%。同時，下拉菜單在引導(dǎo)用戶發(fā)現(xiàn)熱點，拓展視野，輕松搜索方面，帶給用戶超出想像的搜索體驗。

可以輸入的下拉框的實現(xiàn)方法其實就是select選擇框和input輸入框的組合在select選擇框中加入onchange方法，在js中將select選中的值賦值給input輸入框，如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們文軍營銷的官網(wǎng)。

推薦閱讀

下拉框選中事件 如何使select2插件下拉框多選并獲取選中的值 |...第一步,創(chuàng)建靜態(tài)頁面select.html,引入select2相關(guān)的css和js文件,并引入jquery核心js 第二步,在body標(biāo)簽內(nèi)插入select元素,設(shè)置屬性multiple和class,寬度為300px 第三步,初始化select2插件,需要調(diào)用select2()方法 第四步,為了演示獲取下拉框值,這里利用button按鈕點擊事件,在select下方插入一個