项目中有个需求,下拉框既可以下拉选择,也可以手动填写
html代码
<span>数据来源</span>
<select class="source">
<option value="0">人工导入</option>
<option value="1">数据服务平台</option>
</select>
js代码
$('#noMean').editableSelect({
filter:false,
effects: 'fade',
duration: 200,
onCreate:function () {
console.log("下拉框创建")
},
onShow:function () {
console.log("下拉框显示")
},
onHide:function () {
console.log("下拉框隐藏")
},
onSelect:function () {
console.log("下拉框选项被选中")
}
}
获取值
$(".noMean").val()
用了这个插件以后,这块是一个input,type="text"
参数
filter 选择option以后,是否过滤 默认 true
effects 点击的时候,下拉框的过渡效果 有default,slide,fade三个值,默认是default
duration 过渡效果时间 默认是fast 值可以是fast和slow,也可以是数字
appendTo 下拉框如果弹出框效果,这个值才会用到,显示把它加载到哪里
trigger 下拉框列表如何触发 值是"focus", "manual" 默认是focus
方法
onCreate:当editableSelect方法生效时触发。
onShow:当下拉框出现时触发。
onHide:当下拉框隐藏时触发。
onSelect:当下拉框中的选项被选中时触发。
参考地址:
https://www.npmjs.com/package/jquery-editable-select npm安装
http://indrimuska.github.io/jquery-editable-select/ demo地址
https://github.com/zhaobao1830/jquery-editable-select 下载地址
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持亿速云!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。