bootstrap可编辑下拉框jquery.editable-select
@H_403_0@下载链接地址:链接: <a href="https://pan.baidu.com/s/1pLl0uCj">https://pan.baidu.com/s/1pLl0uCj 密码: cd59
@H_
403_0@然后直接请看
代码:
@H_
403_0@引用:
<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript" src="${ contextPath }/res/sys/scripts/jquery.editable-select.min.js">
<link href="${ contextPath }/res/sys/scripts/css/jquery.editable-select.min.css" rel="external
nofollow" rel="stylesheet">
@H_
403_0@HTML部分:
用量
|
@H_
403_0@JS部分:
"+ data[int].name +"";
}
$('#numUnit').html(htm);
$('#numUnit').editableSelect({
effects: 'slide' //设置可编辑 其它可选参数default、fade
});
$('#numUnit').val(data[0].name); //设置默认值
});
@H_
403_0@url返回的json为
:[{"dataDictNo":"024001","gbNo":"","name":"千克","nameInitAbbr":"QK","parentNo":"024"}]
@H_
403_0@ajaxDirect 是变了个花样的ajax,可无视
函数
* @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
});
}
@H_
403_0@
效果如图:

@H_
403_0@
其它选项设置:
@H_
403_0@filter:过滤,即当输入
内容时下拉选项会匹配输入的字符,
支持中文,true/false,默认true。
@H_
403_0@effects:动画
效果,当触发弹出下拉选择框时的下拉框展示过渡
效果,有default,slide,fade三个值,默认是default。
@H_
403_0@duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。
@H_
403_0@
事件
@H_
403_0@onCreate:当输入时触发。
@H_
403_0@onShow:当下拉时触发。
@H_
403_0@onHide:当下拉框隐藏时触发。
@H_
403_0@onSelect:当下拉框中的选项被选中时触发。