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

本文展示了如何使用JavaScript创建一个自定义组合框,允许用户输入特定字符范围内的值,并提供了实时反馈功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值