bootstrap可编辑下拉框jquery.editable-select

前端之家收集整理的这篇文章主要介绍了bootstrap可编辑下拉框jquery.editable-select前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_403_0@下载链接地址链接: <a href="https://pan.baidu.com/s/1pLl0uCj"&gt;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:当下拉框中的选项被选中时触发。

猜你在找的jQuery相关文章