1. 程式人生 > >jQuery 實現可編輯下拉框。

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。輸入選擇內容後。該項會自動新增到下拉列表並選中。當用戶選擇其它專案,使用者新增的自定義專案又會被自動刪除。