- 时间:2022-10-04 04:35 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:select下拉框插件jquery.editable-select详解
项目中有个需求,下拉框既可以下拉选择,也可以手动填写
[b]html代码[/b]
<span>数据来源</span>
<select class="source">
<option value="0">人工导入</option>
<option value="1">数据服务平台</option>
</select>
[b]js代码[/b]
$('#noMean').editableSelect({
filter:false,
effects: 'fade',
duration: 200,
onCreate:function () {
console.log("下拉框创建")
},
onShow:function () {
console.log("下拉框显示")
},
onHide:function () {
console.log("下拉框隐藏")
},
onSelect:function () {
console.log("下拉框选项被选中")
}
}
[b]获取值[/b]
[code]$(".noMean").val()[/code]
用了这个插件以后,这块是一个input,type="text"
[b]参数[/b]
filter 选择option以后,是否过滤 默认 true
effects 点击的时候,下拉框的过渡效果 有default,slide,fade三个值,默认是default
duration 过渡效果时间 默认是fast 值可以是fast和slow,也可以是数字
appendTo 下拉框如果弹出框效果,这个值才会用到,显示把它加载到哪里
trigger 下拉框列表如何触发 值是"focus", "manual" 默认是focus
[b]方法[/b]
[b]onCreate[/b]:当editableSelect方法生效时触发。
[b]onShow[/b]:当下拉框出现时触发。
[b]onHide[/b]:当下拉框隐藏时触发。
[b]onSelect[/b]:当下拉框中的选项被选中时触发。
[b]参考地址:[/b]
[url=https://www.npmjs.com/package/jquery-editable-select]https://www.npmjs.com/package/jquery-editable-select[/url] npm安装
[url=http://indrimuska.github.io/jquery-editable-select/]http://indrimuska.github.io/jquery-editable-select/[/url] demo地址
[url=https://github.com/zhaobao1830/jquery-editable-select]https://github.com/zhaobao1830/jquery-editable-select[/url] 下载地址
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!