bootstrap 的可编辑下拉框 jquery.editable-select
搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人。
先上下载链接:http://pan.baidu.com/s/1kUXvwlL password : 5iqn
然后直接请看代码:
引用:
<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="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
});
}
效果如图:
其它选项设置:
- filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。
- effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。
- duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。
事件
- onCreate:当输入时触发。
- onShow:当下拉时触发。
- onHide:当下拉框隐藏时触发。
- onSelect:当下拉框中的选项被选中时触发。
bootstrap 的可编辑下拉框 jquery.editable-select的更多相关文章
- jquery.editable-select 可编辑下拉框之获取select值和input值
使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...
- bootstrap可编辑下拉框jquery.editable-select
搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接: http://pan.baidu.com/s/1kUXvwlL pas ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- easy ui 下拉级联效果 ,下拉框绑定数据select控件
html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...
- easy ui 下拉框绑定数据select控件
easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td&g ...
- selenium中的下拉框处理模块Select
在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...
- 自动化测试-11.selenium的下拉框处理类Select
前言 最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关 ...
- 下拉框处理(select)
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法 基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...
- selenium自学笔记---下拉框定位元素select
下拉框1.先定位select 然后在定位option city = driver.find_element_by_id("selCities_0") city.find_eleme ...
随机推荐
- 10分钟搞懂Tensorflow 逻辑回归实现手写识别
1. Tensorflow 逻辑回归实现手写识别 1.1. 逻辑回归原理 1.1.1. 逻辑回归 1.1.2. 损失函数 1.2. 实例:手写识别系统 1.1. 逻辑回归原理 1.1.1. 逻辑回归 ...
- log4j与log4j.properties的配置
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt233 摘要: 一.配置步骤 1. 在应用程序中使用log4j 2. 把l ...
- WCF(三)分布式事务
最近在学WCF,所以有两个设想疑问(菜鸟多疑问): 如果有WCF服务A,WCF服务B,客户端调用WCF服务A插入一条数据,然后再调用服务B也插入一条数据,然而服务B出错了进行了回滚,服务A能不能也进行 ...
- C++中模板Template的使用
1. 在c++Template中很多地方都用到了typename与class这两个关键字,而且好像可以替换,是不是这两个关键字完全一样呢?class用于定义类,在模板引入c++后,最初定义模板的方法为 ...
- React——组件
一.创建组件 在React中有两种创建组件的方式,分别是函数形式的组件和类形式的组件 //函数形式: function Welcome(props){ return <p>this is ...
- Swing-setOpaque()用法-入门
先看API: public void setOpaque(boolean isOpaque) 如果为 true,则该组件绘制其边界内的所有像素.否则该组件可能不绘制部分或所有像素,从而允许其底层像素透 ...
- 201521123056 《Java程序设计》第3周学习总结
1. 本周学习总结 -本周学习了面向对象,学会了如何用Eclipse自动生成setter/getter/toString以及构造有参函数等 2. 书面作业 1.代码阅读 public class Te ...
- Java课设 彩票购买抽奖程序 个人博客
一.团队课程设计博客链接 http://www.cnblogs.com/lyq063/p/7072507.html 二.自己的代码提交记录截图 三.自己负责模块或任务详细说明 用户注册信息的存储和登录 ...
- 201521123034《Java程序设计》第十三周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- JAVA课程设计 计算器模拟程序 王华俊(201521123015)
1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 GUI界面设计 各类之间拼接 3.自己的代码提交记录截图 ...