bootstrap可編輯下拉框jquery.editable-select
下載鏈接地址:鏈接: 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:過濾,即當(dāng)輸入內(nèi)容時下拉選項會匹配輸入的字符,支持中文,true/false,默認true。
effects:動畫效果,當(dāng)觸發(fā)彈出下拉選擇框時的下拉框展示過渡效果,有default,slide,fade三個值,默認是default。
duration:下拉選項框展示的過渡動畫速度,有fast,slow,以及數(shù)字(毫秒),默認是fast。
事件
onCreate:當(dāng)輸入時觸發(fā)。
onShow:當(dāng)下拉時觸發(fā)。
onHide:當(dāng)下拉框隱藏時觸發(fā)。
onSelect:當(dāng)下拉框中的選項被選中時觸發(fā)。
相關(guān)文章
JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug
在做項目時候遇到一個小小的顯示客戶部門名稱(拼音)的業(yè)務(wù),就是在部門名稱下有相應(yīng)的拼音,而在現(xiàn)有的數(shù)據(jù)庫中沒有相應(yīng)字段,并且部門數(shù)量比較多,添加起來比較費時,就想能否在js中實現(xiàn),在頁面中處理。2010-03-03JS實現(xiàn)定時任務(wù)每隔N秒請求后臺setInterval定時和ajax請求問題
這篇文章主要介紹了JS實現(xiàn)定時任務(wù)每隔N秒請求后臺setInterval定時和ajax請求 的相關(guān)資料,需要的朋友可以參考下2017-10-10詳解微信小程序「渲染層網(wǎng)絡(luò)層錯誤」的解決方法
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡(luò)層錯誤」的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01純JS打造網(wǎng)頁中checkbox和radio的美化效果
這篇文章主要介紹了純JS打造網(wǎng)頁中checkbox和radio的美化效果,代碼簡單易懂,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-10-10