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实现弹窗下拉搜索选择框功能
基础教程推荐
猜你喜欢
- 原生JS获取元素集合的子元素宽度实例 2024-04-01
- Vue.js:图片懒加载和预加载的实现与原理 2023-10-08
- JavaScript Event学习第七章 事件属性 2023-11-30
- vue后台返回格式为二进制流进行文件的下载方式 2024-02-08
- css实现三栏布局的几种方法及优缺点 2023-12-20
- javascript基于prototype实现类似OOP继承的方法 2023-12-03
- javascript中的不等于怎么表示 2022-12-10
- HTML/CSS \\”响应式截断\\” 2022-09-21
- 使用getJSON()异步请求服务器返回json格式数据的实现 2023-02-14
- 事件冒泡是什么如何用jquery阻止事件冒泡 2024-04-15