jQuery 实现可编辑下拉框。

HTML的下拉框可以让用户方便地选择项目，但是如果要允许用户随意添加选项呢？有朋友建议我使用一个按钮，添加自定义项目。不过我还是倾向于在下拉框里做手脚。

在select中添加一项，其它。value=-1 select中class中增加 editable 然后js代码如下。

$.fn.editable = function(config){$(this).each(function(i,t){$(t).change(function(){var me=$(this);me.find('.customval').remove();if(-1 == me.val()){var ed = $("<input type=\"text\" class=\"form-control\" />");me.after(ed).hide();ed.blur(function(){var v=ed.val();if(null === v ||  v.length ==0){ed.remove();me.val(null).show();}else{me.append("<option value=\""+v+"\" class=\"customval\" selected>"+v+"</option>").show();ed.remove();}}).focus();}})});}

当用户选择其它，select会摇身一变，变成一个 input。输入选择内容后。该项会自动添加到下拉列表并选中。当用户选择其它项目，用户添加的自定义项目又会被自动删除。