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

发布时间：2020-12-15 21:24:56 所属栏目：百科来源：网络整理

导读：是否有可能有一个下拉控件具有功能,如果下拉列表中没有任何元素我感兴趣我可以自己键入它？谢谢你的帮助解决方法免责声明：我知道这个问题没有被标记为jQuery,但是对于未来的搜索用户,我将为 jquery解决方案提供一个开端. 这是一个非常简单的jQuery插件开

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

谢谢你的帮助

解决方法

免责声明：我知道这个问题没有被标记为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：“添加一个新项目哟！”});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!