时间:2021-05-28
下载链接地址:链接: 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});}效果如图:
其它选项设置:
filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。
effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。
duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。
事件
onCreate:当输入时触发。
onShow:当下拉时触发。
onHide:当下拉框隐藏时触发。
onSelect:当下拉框中的选项被选中时触发。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件;当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢?
要使bootstrap-table实现可编辑,需要配合使用x-editable插件。先在页面上导入必要的css和js文件bootstrap-tabledemo$
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的
jQueryForm表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框、文本框、单选、
话不多说,附上实例代码,仅供大家参考禁用下拉框//下拉框禁用$("select").each(function(){ $("#"+this.id).attr(