可以自行输入的下拉框 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