微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

c# – 下拉选项,添加新元素

是否有可能有一个下拉控件具有功能,如果下拉列表中没有任何元素我感兴趣我可以自己键入它?

谢谢你的帮助

解决方法

免责声明:我知道这个问题没有被标记为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);

用法:$(‘#mySelectBox’).freeEntry({addItemText:“添加一个新项目哟!”});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐