【寫在前面的話】**上很多用各種外掛程式,比如依賴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...