Layui查询后端数据并对下拉框的根据后端数据进行渲染
您可以通过Layui的form模块和jQuery的ajax方法来实现从后端获取数据,并将数据渲染到下拉框中。
首先,在HTML中定义一个下拉框元素和一个隐藏的input元素,用于存储选中的值:
<select id="select" lay-filter="selectFilter">
<option value="">请选择</option>
</select>
<input type="hidden" id="selectedValue">
然后,在JavaScript中使用ajax方法从后端获取数据,并将数据渲染到下拉框中:
layui.use(['form', 'jquery'], function(){
var form = layui.form;
var $ = layui.jquery;
// 通过ajax获取后端数据
$.ajax({
url: 'your_backend_url',
type: 'GET',
dataType: 'json',
success: function(data){
// 渲染下拉框
var select = $('#select');
for(var i=0; i<data.length; i++){
var option = '<option value="' + data[i].value + '">' + data[i].name + '</option>';
select.append(option);
}
// 重新渲染下拉框
form.render('select');
}
});
// 监听下拉框选中事件
form.on('select(selectFilter)', function(data){
var selectedValue = data.value;
// 将选中的值存储到隐藏的input元素中
$('#selectedValue').val(selectedValue);
});
});
这样,当页面加载完成后,会通过ajax从后端获取数据,并将数据渲染到下拉框中。当下拉框的选中值发生变化时,会将选中的值存储到隐藏的input元素中
原文地址: http://www.cveoy.top/t/topic/h1Eo 著作权归作者所有。请勿转载和采集!