快捷導(dǎo)航

bootstrap可編輯下拉框jquery.editable-select

更新時(shí)間：2017年10月12日 09:59:25 作者：Silver_Kratos

這篇文章主要介紹了bootstrap可編輯下拉框jquery.editable-select的相關(guān)資料，需要的朋友可以參考下

下載鏈接地址：鏈接: https://pan.baidu.com/s/1pLl0uCj 密碼: cd59

然后直接請(qǐng)看代碼：

引用：

<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="&nbsp;">
</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è)置默認(rèn)值
});

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

ajaxDirect 是變了個(gè)花樣的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
});
}

效果如圖：

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

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

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

duration：下拉選項(xiàng)框展示的過渡動(dòng)畫速度，有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)文章

JavaScript的setter與getter方法
這篇文章主要為大家詳細(xì)介紹了JavaScript的setter與getter方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個(gè)瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下
2016-03-03
微信小程序?qū)崿F(xiàn)豎排slider效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)豎排slider效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JS 中可以提升幸福度的小技巧(可以識(shí)別更多另類寫法)
本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新
2018-07-07
使用JavaScript實(shí)現(xiàn)圖片放大鏡功能
圖片放大鏡（Image?Zoom）效果在許多電子商務(wù)網(wǎng)站、在線畫廊和產(chǎn)品展示頁面中得到廣泛應(yīng)用,它允許用戶通過鼠標(biāo)懸停在圖片上,查看圖片的詳細(xì)局部放大效果,本文將詳細(xì)介紹如何使用?JavaScript?實(shí)現(xiàn)一個(gè)基本的圖片放大鏡功能,需要的朋友可以參考下
2024-12-12
JS數(shù)組及對(duì)象遍歷方法代碼匯總
這篇文章主要介紹了JS數(shù)組及對(duì)象遍歷方法代碼匯總,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
JavaScript獲取對(duì)象鍵名的五種方法
在 JavaScript 中,操作對(duì)象時(shí)獲取鍵名是高頻需求,不同場(chǎng)景下,我們需要篩選「自身/繼承屬性」「可枚舉/不可枚舉鍵」「字符串/Symbol 鍵」,本文將全面梳理 5 種核心方法的差異與適用場(chǎng)景,助你精準(zhǔn)選擇,需要的朋友可以參考下
2025-04-04
js防止表單重復(fù)提交的兩種方法
第一種：用flag標(biāo)識(shí)，下面的代碼設(shè)置checkSubmitFlg標(biāo)志；第二種：在onsubmit事件中設(shè)置，在第一次提交后使提交按鈕失效，感興趣的朋友可以了解下
2013-09-09
使用window.postMessage()方法在兩個(gè)網(wǎng)頁間傳遞數(shù)據(jù)
這篇文章介紹了使用window.postMessage()在兩個(gè)網(wǎng)頁間傳遞數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
詳細(xì)分析jsonp的原理和實(shí)現(xiàn)方式
給大家圖文詳細(xì)分析一下jsonp的原理以及跨域問題的匯總。
2017-11-11