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-data的三种用法
Apr 18 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery实现图片放大镜效果
Dec 23 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
php xml实例 留言本
2009/03/20 PHP
基于pear auth实现登录验证
2010/02/26 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php 实现进制相互转换
2016/04/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python守护线程用法实例
2017/06/23 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python 写一个水果忍者游戏
2021/01/13 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
表彰先进集体通报
2014/01/12 职场文书
初三家长会邀请函
2014/01/18 职场文书
年会活动策划方案
2014/01/23 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
小学生安全保证书
2015/05/09 职场文书
班级联欢会主持词
2015/07/03 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技