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();
}
})
});
}