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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

推薦閱讀

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