c# - 带有添加新元素选项的下拉菜单

Question

是否可以有一个下拉控件，如果下拉列表中没有我感兴趣的元素，我可以自己输入它的功能？

谢谢你的帮助

Answer 1

免责声明:我知道这个问题没有被标记为 jQuery，但对于 future 搜索的用户，我将提供一个 jquery 解决方案的开始。

---

这是 jQuery 插件的一个非常简单的开始，用于处理允许动态选项进入选择框。为每个选择元素在 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: "Add a new item yo!"} );