layui实现弹窗下拉搜索选择框功能,实现效果如下:layui实现弹窗下拉搜索选择框功能,实现效果如下: html按钮: a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" 通过/a js代码部分: script // 事件监听 $('.audit_btn').click(function (){ const id = $(this).data('id') // 引入 layer,f

html按钮:
<a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" >通过</a>
js代码部分:
<script>
// 事件监听
$('.audit_btn').click(function (){
const id = $(this).data('id')
// 引入 layer,form组件
layui.use(['layer','form'], () => {
var layer = layui.layer;
// 拼接option
let htmlStr = '<form class="layui-form">' +
'<div class="layui-form-item">' +
'<select name="interest" lay-verify="required" lay-search="">' +
'<option value="">请选择</option>';
$.each(store_list,function (key,item) {
htmlStr += '<option value="'+key+'">'+ item +'</option>';
})
htmlStr += '</select>' +
'</div>' +
'</form>';
layer.open({
title: '请选择',
content: htmlStr,
btn: ['通过'],
success: function(layero, index) {
layui.form.render();
layero.find('.layui-layer-content').css('overflow', 'unset');
} ,
yes: function(index, layero){
// 获取选中的值
var store_id = layero.find("select").val();
if(store_id == ''){
layer.msg('请选择关联商户!')
return
}
// 输出选中的值
layer.close(index); //关闭弹层
var url = "请求地址";
var data = {};
data.id = id;
data.store_id = store_id;
data.op = 'adopt';
// ajax请求接口
$.ajax({
url: url,
data: data,
dataType: 'json',
success: function(data) {
var txt = data.msg;
layer.msg(txt)
if(data.status == 1){
window.location.href = data.url;
}
}
});
}
});
})
})
</script>
编程基础网
本文标题为:layui实现弹窗下拉搜索选择框功能
基础教程推荐
猜你喜欢
- 详解CSS玩转图片Base64编码 2022-11-23
- [前端、HTTP协议、HTML标签] 2023-10-26
- 鼠标指向网页图片时图片周围显示虚线框 2024-01-09
- 将页脚固定在页面底部的CSS实战 2023-12-08
- 纯JS实现AJAX局部刷新功能 2023-01-31
- 微信小程序开发注意指南和优化实践(小结) 2024-01-17
- 使用cookie绕过验证码登录的实现代码 2024-02-11
- 服务器安全设置的几个注册表设置 2023-12-15
- Python selenium根据class定位页面元素的方法 2023-12-09
- 利用CSS3实现文本框的清除按钮相关的一些效果 2023-12-20
