jQuery實現簡單的下拉可輸入組合框

2022-09-12 08:57:15 字數 1415 閱讀 4636

【寫在前面的話】**上很多用各種外掛程式,比如依賴bootstrap的bootstrap-select外掛程式等。雖然這些框架可以實現很多功能,但因為在實際專案中,可能只會用到其中的某個功能,若是一概引入,會導致整個js載入過於笨重。比如前面提到的bootstrap-select外掛程式,在不壓縮的情況下,達到300多k。因此,為了實現乙個可填寫的下拉框有點得不償失。

基於這種原因,於是私下用jquery寫了乙個比較簡單的下拉可填寫組合框。

css code:

1.container

8 .text-container

16.selectcontainer

25.selectedcontent

30 .dropdown-toggle

43 .dropdown-menu

55.items

60.items:hover

63.dsn

html code:

1<

div

class

="container"

>

2<

span

class

="text-container"

>最愛的水果:

span

>

3<

div

class

="singleselect selectcontainer"

>

4<

input

type

="text"

class

="selectedcontent"

>

5<

div

class

="dropdown-toggle"

>選擇

div>

6<

ul class

="dropdown-menu dsn"

>

7<

li class

="items"

>蘋果

li>

8<

li class

="items"

>梨

li>

9<

li class

="items"

>橘子

li>

10ul

>

11div

>

12div

>

j**ascript code: 

1 $('.items').on('click', function()6

});7 $('.dropdown-toggle').on('click', function

());

本文中使用jquery-2.1.1完成,請多多指教。

Jquery多語言下拉控制項,點選可實現跳轉相應語言

document ready function quyuyan the select element to be replaced var select select.makemefancy var selectboxcontainer var dropdown var selectbox sele...

Jquery簡單實現可編輯下拉框功能

第一版 試圖使用樣式控制,在需要輸入的時候把input輸入框重疊在select控制項之上。ie下沒有問題,結果ff下就杯具了,在firefox下selelct總是被放置最頂層。szxtzcz 第二版 通過事件或者按鈕觸發完成輸入框和下拉框的切換 num message id address send...

jquery實現下拉聯動

很多專案用到這個功能,雖然寫了不下5次以上了,一直沒做過記錄,記錄一下,下次直接拷貝了,免得還得要重複寫浪費時間。先上html 1 品牌 2 select class sa id zxpp style width 120px 3 option value 請選擇 option 4 option va...