jQuery 實現可編輯下拉框。
阿新 • • 發佈:2019-01-31
HTML的下拉框可以讓使用者方便地選擇專案,但是如果要允許使用者隨意新增選項呢?有朋友建議我使用一個按鈕,新增自定義專案。不過我還是傾向於在下拉框裡做手腳。
在select中新增一項,其它。value=-1 select中class中增加 editable 然後js程式碼如下。
當用戶選擇其它,select會搖身一變,變成一個 input。輸入選擇內容後。該項會自動新增到下拉列表並選中。當用戶選擇其它專案,使用者新增的自定義專案又會被自動刪除。$.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(); } }) }); }