解决方法
免责声明:我知道这个问题没有被标记为jQuery,但是对于未来的搜索用户,我将为
jquery解决方案提供一个开端.
这是一个非常简单的jQuery插件开始,它允许动态选项进入选择框.为每个select元素添加一个额外的文本框和按钮到DOM.此外,选项列表底部还会添加一个选项,其中包含“添加项目…”等文本.选中此选项允许用户键入新项目并将其添加到选择框.
这里的实例:http://jsfiddle.net/8G6z3/1/
(function($) { $.fn.freeEntry= function(options){ var settings = $.extend( {},{ //defaults addItemText: 'add item...' },options ); return this.each(function(){ var $this = $(this); var $addItemOption = $('<option>' + settings.addItemText + '</option>'); $this.append($addItemOption); var $addItemControl = $('<input type=text>').hide(); $addItemControl.insertAfter($this); var $addItemButton = $('<input type=button value="add">').hide(); $addItemButton.insertAfter($addItemControl); $addItemButton.click(function(){ if($addItemControl.val().length){ var $newOption = $('<option>' + $addItemControl.val() + '</option>'); $newOption.insertBefore('option:last',$this) $this.val($addItemControl.val()); $addItemControl.val(''); } $addItemControl.hide(); $addItemButton.hide(); }); $this.change(function(){ var $this = $(this); if($this.val() == settings.addItemText){ $addItemControl.show().focus(); $addItemButton.show(); } }); }); } })(jQuery);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。