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中inline-block的最小宽度值 2024-02-09
- JavaScript递归函数解“汉诺塔”算法代码解析 2024-01-06
- sql、linq、lambda三种表达方式转换 转自https://www.cnblogs.com/drzhong/p/4393231.html 2023-10-25
- 关于取不到由location.href提交而来的上级页面地址的解决办法 2023-12-21
- JavaScript更改class和id的方法 2024-02-09
- ThinkPHP Mobile使用方法简明教程 2024-03-10
- HTML5 2023-10-26
- js鼠标点击图片实现随机变换图片的方法 2023-12-21
- 对背景图定位中background-position属性的自我理解 2024-01-23
- 如何在CSS中绘制曲线图形及展示动画 2022-11-16