首页>>表单>>可以自行输入的下拉框 select带输入 可以输入的select下拉框(2014-04-19)

可以自行输入的下拉框 select带输入 可以输入的select下拉框

可以自行输入的下拉框 select带输入 可以输入的select下拉框

 

JavaScript Code
  1. <script type="text/javascript">  
  2.                 $(document).ready(function() {  
  3.                                       
  4.                       
  5.                     $("select").customComboBox({  
  6.   
  7.                         tipText : "Enter Your Value",  
  8.   
  9.                         tipClass : "mytipclass",  
  10.   
  11.                         allowed : /[A-Za-z0-9$.s]/,  
  12.   
  13.                         notallowed : /[<>]/,  
  14.   
  15.                         index : 'last',  
  16.   
  17.                         isEditing : function(el, status, value) {  
  18.                             if (typeof window.console!='object') { return; }  
  19.                             console.info('Editing status changed to (', status, ') on ', el, ' combo box and the selected value is "', value, '"');  
  20.                         },  
  21.                         onKeyDown : function(el, character, fulltext) {  
  22.                             if (typeof window.console!='object') { return; }  
  23.                             console.info('The character (', character, ') was just typed into ', el, ' combo box and the complete text is now "', fulltext, '"');  
  24.                         },  
  25.                         onDelete : function(el, fulltext) {  
  26.                             if (typeof window.console!='object') { return; }  
  27.                             console.info('A character was deleted from ', el, ' combo box and the complete text is now "', fulltext, '"');  
  28.                         }  
  29.                     });  
  30.                       
  31.                     $("form p").find('input').on('click',function(e) {  
  32.                          var sel = $(e.currentTarget).prev('select');  
  33.                          var name = sel.attr('name').toUpperCase();  
  34.                          var val = sel.find('option:selected').val();  
  35.                          $("#result").text(name+" combo box value is " + val);  
  36.                     });  
  37.                       
  38.   
  39.                 });  
  40.   
  41.                       
  42.   
  43.             </script>  

 

XML/HTML Code
  1. <form style="margin-top:100px;">  
  2.                <p><strong>jQuery Plugins</strong><br/>  
  3.                <select name='Plugins'>  
  4.                    <option value="jQueryScript.Net">freejs.net</option>  
  5.                    <option value="jQuery.Com">jQuery.Com</option>  
  6.                    <option value="Google.com">Google.com</option>  
  7.                </select>  
  8.                <input type='button' value='Submit' />  
  9.                </p>  
  10.                <p><strong>Pizza Toppings</strong><br/>  
  11.                 <select name='pizza'>  
  12.                    <option value="pepperoni">Pepperoni</option>  
  13.                    <option value="extra cheese">Extra Cheese</option>  
  14.                    <option value="banana peppers">Banana Peppers</option>  
  15.                </select>  
  16.                <input type='button' value='Submit' />  
  17.                </p>  
  18.                <p><strong>price</strong><br/>  
  19.                 <select name='donation'>  
  20.                    <option value="10.00">10.00</option>  
  21.                    <option value="20.00">20.00</option>  
  22.                    <option value="30.00">30.00</option>  
  23.                </select>  
  24.                <input type='button' value='Submit' />  
  25.                </p>  
  26.            </form>  

 


原文地址:http://www.freejs.net/article_biaodan_308.html