LayUI可选择可输入下拉框

可输入的下拉框

把input 叠加到select上，外观看起来像一个框。

利用z-index把 input框放到select 上层、并让select 不自动填充。
　　我现在做的事情：在选择其他时，让他自定义输入。

第一步

select 加上 autocomplete=“off”

第二步

写一个样式：

.input-select{position:absolute;z-index:2; width: 160px;top: 0px;display: none;}

放到要用的input 或div上 (输入框先不要验证等显示的时候加验证)

当然你可以把输入框的位置放到你想要的地方不用覆盖到select上方用.show 和.hide控制显示和隐藏。　　　
第三步：

js 做个触发：js 因人而异吧看想做成什么样的

form.on('select(molding)', function(data){if(data.value=='其他'){$('#moldingOtDiv').show();$('#moldingOt').attr("lay-verify","required|length");}else{$('#moldingOtDiv').hide();$('#moldingOt').val('');$('#moldingOt').attr("lay-verify","");}});

那么前台大概是：
刚进来是一个普通下拉选。当点击其他就变成了输入框。

　　当点击其他：

LayUI可选择可输入下拉框相关推荐

解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...
layui表单单选按钮和下拉框默认选中
单选按钮和下拉框默认选中在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中.我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值. 1.HTML片 ...
layui select 赋值_layui给下拉框及日期组件赋值
一.吐槽,layui感觉真的是比较不好用二.为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿, 可能一个功能的开发我用其vue框架很简便就实现了,但 ...
layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法，按钮的状态
layui给下拉框.按钮状态.时间赋初始值的方法,按钮的状态如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监 ...
layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法
如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监听行工具事件 table.on('tool(test)', f ...
html select不允许选择,设置select下拉框不能选择
今天在做一个小功能的时候,需要对特定的一个select设置禁止选择,只好采用js进行控制,接下来吾爱编程为大家介绍一下设置select下拉框不能选择的方法,有需要的小伙伴可以参考一下: 1.功能需求: ...
根据单选框的选择来决定下拉框的禁用与否
在这里插入图片描述大家可以看到,当单选框选择'否'的时候,下拉框被禁用了,而选择'是'的时候,下拉框的禁用被解除了.这是怎么做到的呢?其实很简单. 代码就是以上这些了,是不是很简单?记得一定要先引入 ...
form提交后，jquery 显示文本框选择值和下拉框选中值
不用ajax ,而实现提交form后,页面刷新后,把原来的下拉框的值文本值赋值到对应项 window.load; function load(){ var monthN = docu ...

LayUI可选择可输入下拉框

LayUI可选择可输入下拉框

可输入的下拉框

LayUI可选择可输入下拉框相关推荐

最新文章

热门文章