失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > LayUI可选择可输入下拉框

LayUI可选择可输入下拉框

时间:2023-08-12 03:21:51

相关推荐

LayUI可选择可输入下拉框

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可选择可输入下拉框》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。