您可以通过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元素中

Layui查询后端数据并对下拉框的根据后端数据进行渲染

原文地址: http://www.cveoy.top/t/topic/h1Eo 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录