jQuery 輸入和下拉並存的欄位

也是最近的需求，希望一個輸入欄位可以有input跟下拉式選單共存，要做這樣的話就是自己寫下拉選單，而輸入欄位則用css讓他看起來像在下拉式選單中。

準備html

view plaincopy to clipboardprint

1. <div class="input_select_block">  
2.     <input type="text" id="percent_input">  
3.     <div class="drop_down_btn"></div>  
4.         <ul>  
5.             <li>10</li>  
6.             <li>20</li>  
7.             <li>30</li>  
8.             <li>40</li>  
9.             <li>50</li>  
10.             <li>60</li>  
11.             <li>70</li>  
12.             <li>80</li>  
13.             <li>90</li>  
14.             <li>100</li>  
15.         </ul>  
16.     </div>  
17.     <span>%</span>  
18. </div>  

保留input type="text"，然後寫一個下拉式選單按鈕drop_down_btn和用ul li搭配做一個下拉式選單的選項。

js如下

view plaincopy to clipboardprint

1. $(".drop_down_btn").click(function(e){   
2.     e.stopPropagation();   
3.     $dropList=$(".input_select_block ul");   
4.     if($dropList.is(":visible")){   
5.         $dropList.hide();   
6.     }else{   
7.         $dropList.show();   
8.     };   
9. });   
10.   
11. $(".input_select_block ul li").click(function(e){   
12.     e.stopPropagation();   
13.     $("#percent_input").val($(this).text());   
14.     $(".input_select_block ul").hide();   
15. });  

另外我有用plugin限制輸入範圍跟類型，詳細的code可以看下面的連結。
Demo