可以自行输入的下拉框 select带输入 可以输入的select下拉框
JavaScript Code
- <script type="text/javascript">
- $(document).ready(function() {
- $("select").customComboBox({
- tipText : "Enter Your Value",
- tipClass : "mytipclass",
- allowed : /[A-Za-z0-9$.s]/,
- notallowed : /[<>]/,
- index : 'last',
- isEditing : function(el, status, value) {
- if (typeof window.console!='object') { return; }
- console.info('Editing status changed to (', status, ') on ', el, ' combo box and the selected value is "', value, '"');
- },
- onKeyDown : function(el, character, fulltext) {
- if (typeof window.console!='object') { return; }
- console.info('The character (', character, ') was just typed into ', el, ' combo box and the complete text is now "', fulltext, '"');
- },
- onDelete : function(el, fulltext) {
- if (typeof window.console!='object') { return; }
- console.info('A character was deleted from ', el, ' combo box and the complete text is now "', fulltext, '"');
- }
- });
- $("form p").find('input').on('click',function(e) {
- var sel = $(e.currentTarget).prev('select');
- var name = sel.attr('name').toUpperCase();
- var val = sel.find('option:selected').val();
- $("#result").text(name+" combo box value is " + val);
- });
- });
- </script>
XML/HTML Code
- <form style="margin-top:100px;">
- <p><strong>jQuery Plugins</strong><br/>
- <select name='Plugins'>
- <option value="jQueryScript.Net">freejs.net</option>
- <option value="jQuery.Com">jQuery.Com</option>
- <option value="Google.com">Google.com</option>
- </select>
- <input type='button' value='Submit' />
- </p>
- <p><strong>Pizza Toppings</strong><br/>
- <select name='pizza'>
- <option value="pepperoni">Pepperoni</option>
- <option value="extra cheese">Extra Cheese</option>
- <option value="banana peppers">Banana Peppers</option>
- </select>
- <input type='button' value='Submit' />
- </p>
- <p><strong>price</strong><br/>
- <select name='donation'>
- <option value="10.00">10.00</option>
- <option value="20.00">20.00</option>
- <option value="30.00">30.00</option>
- </select>
- <input type='button' value='Submit' />
- </p>
- </form>
原文地址:http://www.freejs.net/article_biaodan_308.html
相关推荐
可输入下拉框(select)源代码 可输入下拉框(select)源代码 select下拉框中可输入内容
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能,感兴趣的小伙伴们可以参考一下
下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。
JQ JS javascript bootstrap 带搜索 下拉框 select
在开发过程中,我们经常会遇到有些页面要求某个文本域可以文本输入,又要求兼带支持select下拉选择
下拉框(select),可以多选,带有分组搜索功能
JQ JS javascript 多选 多选下拉框 select bootstrap-select
好看的下拉框 select 动态效果 , 附使用方法与实例.简单易用.
带搜索功能的select下拉框,类似百度google的搜索框,自己匹配,很好用
select 下拉框可以多选Demo事列.
好看的select下拉框(带搜索功能),由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
可以输入的下拉框(可用于项目的)
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
selectordie演示11种美化下拉框select方法 selectordie演示11种美化下拉框select方法 selectordie演示11种美化下拉框select方法 selectordie演示11种美化下拉框select方法
JQ JS javascript layui UI框架 带搜索下拉框 select
html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。