2013年9月10日 星期二

jQuery 輸入和下拉並存的欄位

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

準備html
  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如下
  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...