bootstrap可編輯下拉框jquery.editable-select
更新時間：2017年10月12日 09:59:25 作者：Silver_Kratos
這篇文章主要介紹了bootstrap可編輯下拉框jquery.editable-select的相關(guān)資料，需要的朋友可以參考下
下載鏈接地址：鏈接: https://pan.baidu.com/s/1pLl0uCj 密碼: cd59
然后直接請看代碼：
引用：
<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" >
<h4>用量</h4>
</th>
<td valign="middle" style="width:28%">
<input type="text" class="form_input form-control" id='num' name='num' value='${map.get("input_value")}' placeholder=" ">
</td>
<td valign="middle" style="width:27%">
<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' //設(shè)置可編輯 其它可選參數(shù)default、fade
});
$('#numUnit').val(data[0].name); //設(shè)置默認值
});
url返回的json為：[{"dataDictNo":"024001","gbNo":"","name":"千克","nameInitAbbr":"QK","parentNo":"024"}]
ajaxDirect 是變了個花樣的ajax，可無視
/**
* 返回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
});
}
效果如圖：
其它選項設(shè)置：
filter：過濾，即當輸入內(nèi)容時下拉選項會匹配輸入的字符，支持中文，true/false，默認true。
effects：動畫效果，當觸發(fā)彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，默認是default。
duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數(shù)字（毫秒），默認是fast。
事件
onCreate：當輸入時觸發(fā)。
onShow：當下拉時觸發(fā)。
onHide：當下拉框隱藏時觸發(fā)。
onSelect：當下拉框中的選項被選中時觸發(fā)。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript的setter與getter方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)豎排slider效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新2018-07-07
圖片放大鏡（Image?Zoom）效果在許多電子商務(wù)網(wǎng)站、在線畫廊和產(chǎn)品展示頁面中得到廣泛應(yīng)用,它允許用戶通過鼠標懸停在圖片上,查看圖片的詳細局部放大效果,本文將詳細介紹如何使用?JavaScript?實現(xiàn)一個基本的圖片放大鏡功能,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了JS數(shù)組及對象遍歷方法代碼匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
在 JavaScript 中,操作對象時獲取鍵名是高頻需求,不同場景下,我們需要篩選「自身/繼承屬性」「可枚舉/不可枚舉鍵」「字符串/Symbol 鍵」,本文將全面梳理 5 種核心方法的差異與適用場景,助你精準選擇,需要的朋友可以參考下2025-04-04
第一種：用flag標識，下面的代碼設(shè)置checkSubmitFlg標志；第二種：在onsubmit事件中設(shè)置，在第一次提交后使提交按鈕失效，感興趣的朋友可以了解下2013-09-09
使用window.postMessage()方法在兩個網(wǎng)頁間傳遞數(shù)據(jù)
這篇文章介紹了使用window.postMessage()在兩個網(wǎng)頁間傳遞數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
給大家圖文詳細分析一下jsonp的原理以及跨域問題的匯總。2017-11-11