這篇文章給大家分享的是有關bootstrap可編輯下拉框jquery.editable-select怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務有：網站設計、網站建設、微信公眾號開發、網站優化、網站認證、雙峰ssl等。為近1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的雙峰網站制作公司

引用：

<script type="text/javascript" src="${ contextPath }/res/sys/scripts/jquery.editable-select.min.js"></script>
<link href="${ contextPath }/res/sys/scripts/css/jquery.editable-select.min.css" rel="external nofollow" rel="stylesheet">

HTML部分：

</tr>
<tr>
<th valign="middle" >
<h5>用量</h5>
</th>
<td valign="middle" >
<input type="text" class="form_input form-control" id='num' name='num' value='${map.get("input_value")}' placeholder="&nbsp;">
</td>
<td valign="middle" >
<select id="numUnit" name="numUnit" class="form-control">
</select>
</td>
</tr>

JS部分：

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

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

ajaxDirect 是變了個花樣的ajax，可無視

/**
* 返回JSON形式的數據
* @param url 地址
* @param data 參數
* @param func 返回函數
* @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
});
}

效果如圖：

其它選項設置：

filter：過濾，即當輸入內容時下拉選項會匹配輸入的字符，支持中文，true/false，默認true。

effects：動畫效果，當觸發彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，默認是default。

duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數字（毫秒），默認是fast。

事件

onCreate：當輸入時觸發。

onShow：當下拉時觸發。

onHide：當下拉框隱藏時觸發。

onSelect：當下拉框中的選項被選中時觸發。

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

網站題目：bootstrap可編輯下拉框jquery.editable-select怎么用
轉載源于：http://www.js-pz168.com/article16/pojcgg.html

成都網站建設公司_創新互聯，為您提供網站建設、外貿建站、建站公司、網站設計、企業建站、

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯