bootstrap可編輯下拉框jquery.editable-select
下載鏈接地址：鏈接: 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=" ">
</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，可無(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ā)。
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- select下拉框插件jquery.editable-select詳解
- 利用jquery獲取select下拉框的值
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- jQuery操作select下拉框的text值和value值的方法
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery操作選中select下拉框的值代碼實(shí)例
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門(mén)效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門(mén)效果代碼,通過(guò)簡(jiǎn)單的JavaScript自定義函數(shù)動(dòng)態(tài)遍歷頁(yè)面元素實(shí)現(xiàn)tab滑動(dòng)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript 中文轉(zhuǎn)拼音實(shí)現(xiàn)代碼 有些bug
在做項(xiàng)目時(shí)候遇到一個(gè)小小的顯示客戶(hù)部門(mén)名稱(chēng)（拼音）的業(yè)務(wù)，就是在部門(mén)名稱(chēng)下有相應(yīng)的拼音，而在現(xiàn)有的數(shù)據(jù)庫(kù)中沒(méi)有相應(yīng)字段，并且部門(mén)數(shù)量比較多，添加起來(lái)比較費(fèi)時(shí)，就想能否在js中實(shí)現(xiàn)，在頁(yè)面中處理。2010-03-03
本文主要介紹了js實(shí)現(xiàn)返回頂部效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要為大家介紹了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求問(wèn)題
這篇文章主要介紹了JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求 的相關(guān)資料,需要的朋友可以參考下2017-10-10
近期做項(xiàng)目由于每張圖片加載的時(shí)候比例大小都不一樣,加載圖片時(shí)大部分圖片會(huì)變形,導(dǎo)致圖片展示效果非常差,所以我們可以獲取圖片的原始寬高,然后以等比例展示,效果會(huì)非常好,這篇文章主要給大家介紹了關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式,需要的朋友可以參考下2022-11-11
原來(lái)的腳本當(dāng)只有一張圖片時(shí)會(huì)彈出JavaScript腳本錯(cuò)誤，特此將自己修改完的版本貼出。2009-09-09
詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡(luò)層錯(cuò)誤」的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
純JS打造網(wǎng)頁(yè)中checkbox和radio的美化效果
這篇文章主要介紹了純JS打造網(wǎng)頁(yè)中checkbox和radio的美化效果,代碼簡(jiǎn)單易懂，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10