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


Posted in jQuery onOctober 12, 2017

下载链接地址:链接: 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' //设置可编辑 其它可选参数default、fade 
});
$('#numUnit').val(data[0].name); //设置默认值
});

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

ajaxDirect 是变了个花样的ajax,可无视

/**
* 返回JSON形式的数据
* @param url 地址
* @param data 参数
* @param func 返回函数
* @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
});
}

效果如图:

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

其它选项设置:

filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。

effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。

duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。

事件

onCreate:当输入时触发。

onShow:当下拉时触发。

onHide:当下拉框隐藏时触发。

onSelect:当下拉框中的选项被选中时触发。

jQuery 相关文章推荐
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
jQuery自动或手动图片切换效果
Oct 11 #jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
jQuery中extend函数简单用法示例
Oct 11 #jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
You might like
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python模块之time模块(实例讲解)
2017/09/13 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
JSF如何进行表格处理及取值
2012/08/06 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
求职信范文大全
2014/05/26 职场文书
个人委托书范文
2015/01/28 职场文书
财务部岗位职责
2015/02/03 职场文书
高一军训感想
2015/08/07 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
redis三种高可用方式部署的实现
2021/05/11 Redis
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP