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

 更新时间:2017年10月12日 09:59:25   作者:Silver_Kratos  
这篇文章主要介绍了bootstrap可编辑下拉框jquery.editable-select的相关资料,需要的朋友可以参考下

下载链接地址:链接: 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="&nbsp;">
</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:当下拉框中的选项被选中时触发。

相关文章

  • javascript globalStorage类代码

    javascript globalStorage类代码

    非IE浏览器“userdata”的解决方案
    2009-06-06
  • Ionic学习日记实现验证码倒计时

    Ionic学习日记实现验证码倒计时

    本篇文章主要介绍了Ionic学习日记实现验证码倒计时,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • javascript 中关于array的常用方法详解

    javascript 中关于array的常用方法详解

    这篇文章主要介绍了javascript 中关于array的常用方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • js获取json元素数量的方法

    js获取json元素数量的方法

    这篇文章主要介绍了js获取json元素数量的方法,可实现对json元素数量的统计功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • Bootstrap table 服务器端分页功能实现方法示例

    Bootstrap table 服务器端分页功能实现方法示例

    这篇文章主要介绍了Bootstrap table 服务器端分页功能实现方法,结合实例形式详细分析了Bootstrap table 服务器端后台交互与分页功能相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • JS实现表单验证案例

    JS实现表单验证案例

    这篇文章主要为大家详细介绍了JS实现表单验证案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • avalon js实现仿google plus图片多张拖动排序附源码下载

    avalon js实现仿google plus图片多张拖动排序附源码下载

    这篇文章主要介绍了avalon js实现仿google plus图片多张拖动排序附源码下载的相关资料,需要的朋友可以参考下
    2015-09-09
  • js实现简单的打印表格

    js实现简单的打印表格

    这篇文章主要为大家详细介绍了js实现简单的打印表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS验证 只能输入小数点,数字,负数的实现方法

    JS验证 只能输入小数点,数字,负数的实现方法

    下面小编就为大家带来一篇JS验证 只能输入小数点,数字,负数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS如何循环遍历JSON数据

    JS如何循环遍历JSON数据

    这篇文章主要介绍了JS如何循环遍历JSON数据的方法,本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,需要的朋友可以参考下
    2024-01-01

最新评论