這篇文章給大家分享的是有關(guān)bootstrap可編輯下拉框jquery.editable-select怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、雙峰ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的雙峰網(wǎng)站制作公司

引用：

HTML部分：

用量

JS部分：

ajaxDirect(contextPath + "/admin/getDataDictAll/024",{},function(data){
var htm = "";
for ( var int = 0; int < data.length; int++) {
htm += ""+ data[int].name +"";
}
$('#numUnit').html(htm); 
$('#numUnit').editableSelect({ 
effects: 'slide' //設(shè)置可編輯 其它可選參數(shù)default、fade 
});
$('#numUnit').val(data[0].name); //設(shè)置默認(rèn)值
});

url返回的json為：[{"dataDictNo":"024001","gbNo":"","name":"千克","nameInitAbbr":"QK","parentNo":"024"}]

ajaxDirect 是變了個(gè)花樣的ajax，可無(wú)視

/**
* 返回JSON形式的數(shù)據(jù)
* @param url 地址
* @param data 參數(shù)
* @param func 返回函數(shù)
* @param async 是否異步
*/
function ajaxDirect(url,data,func,async){
if(!async){
async = false;
}
$.ajax({
url:url,
type:"post",
dataType:"json",
async:async,
data:data,
success:func
});
}

效果如圖：

其它選項(xiàng)設(shè)置：

filter：過(guò)濾，即當(dāng)輸入內(nèi)容時(shí)下拉選項(xiàng)會(huì)匹配輸入的字符，支持中文，true/false，默認(rèn)true。

effects：動(dòng)畫(huà)效果，當(dāng)觸發(fā)彈出下拉選擇框時(shí)的下拉框展示過(guò)渡效果，有default，slide，fade三個(gè)值，默認(rèn)是default。

duration：下拉選項(xiàng)框展示的過(guò)渡動(dòng)畫(huà)速度，有fast，slow，以及數(shù)字（毫秒），默認(rèn)是fast。

事件

onCreate：當(dāng)輸入時(shí)觸發(fā)。

onShow：當(dāng)下拉時(shí)觸發(fā)。

onHide：當(dāng)下拉框隱藏時(shí)觸發(fā)。

onSelect：當(dāng)下拉框中的選項(xiàng)被選中時(shí)觸發(fā)。

感謝各位的閱讀！關(guān)于“bootstrap可編輯下拉框jquery.editable-select怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！