layui 修改 弹出层 下拉框 回显

要修改Layui弹出层中下拉框的回显，你可以按照以下步骤进行操作：

1. 在弹出层中添加一个下拉框元素，并给它一个唯一的ID，例如：

<select id="selectBox"></select>

2. 在弹出层弹出之前，通过Layui的`form`模块初始化下拉框，并设置初始值。你可以使用`form.val`方法来设置下拉框的值，例如：

// 初始化下拉框
layui.use('form', function(){
  var form = layui.form;
  form.val('formId', {
    'selectBox': '默认选中的值'
  });
});

这里的`formId`是弹出层表单的ID，你需要将其替换为实际的表单ID。

3. 当需要回显下拉框时，你可以使用`form.val`方法来更新下拉框的值。例如，假设你从后端获取到了回显的值为`selectedValue`，则可以这样更新下拉框：

layui.use('form', function(){
  var form = layui.form;
  // 更新下拉框的值
  form.val('formId', {
    'selectBox': selectedValue
  });
});

同样，这里的`formId`是弹出层表单的ID。

这样就可以在Layui的弹出层中实现下拉框的回显了。记得根据你实际的代码进行相应的调整。

相关问题

layui 下拉框回显

在 layui 下拉框中，可以通过设置 `selected` 属性来实现回显。例如：

HTML 代码：

<select name="city" lay-verify="required">
  <option value="">请选择城市</option>
  <option value="北京">北京</option>
  <option value="上海" selected>上海</option>
  <option value="广州">广州</option>
  <option value="深圳">深圳</option>
</select>

在这个例子中，我们将 `selected` 属性设置在了第二个选项上，因此页面加载时，该下拉框默认显示的是“上海”。

当然，如果你的下拉框选项是通过 AJAX 请求获取的，那么你需要在回调函数中设置 `selected` 属性。例如：

$.ajax({
  url: '/api/cities',
  success: function(data) {
    var options = '';
    for (var i = 0; i < data.length; i++) {
      var city = data[i];
      options += '<option value="' + city.id + '"';
      if (city.name === '上海') {
        options += ' selected';
      }
      options += '>' + city.name + '</option>';
    }
    $('select[name=city]').html(options);
    form.render('select');
  }
});

在这个例子中，我们在循环中判断每个城市的名称是否为“上海”，如果是则设置 `selected` 属性。然后将生成的选项字符串插入到下拉框中，并调用 `form.render('select')` 方法进行渲染。

layui table 下拉框回显

如果您想在 layui 表格中的下拉框中回显已有的数据，可以使用 `table.on('edit')` 事件和 `form.val()` 方法。

以下是一个示例：

HTML 代码：

<table id="demo" lay-filter="test"></table>

JavaScript 代码：

layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  //渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[
      {field:'id', title:'ID', width:80, sort:true},
      {field:'username', title:'用户名', width:120},
      {field:'sex', title:'性别', width:80, templet: function(d){
        return '<div class="layui-table-cell laytable-cell-1-0-2">' + (d.sex === '男' ? '<select name="sex" lay-filter="sex"><option value="男" selected>男</option><option value="女">女</option></select>' : '<select name="sex" lay-filter="sex"><option value="男">男</option><option value="女" selected>女</option></select>') + '</div>';
      }},
      {field:'city', title:'城市', width:100},
      {field:'sign', title:'签名', width:150, edit:'text'},
      {field:'experience', title:'积分', width:80, sort:true, edit:'text'},
      {field:'ip', title:'IP', width:120},
      {field:'logins', title:'登入次数', width:100, sort:true},
      {field:'joinTime', title:'加入时间', width:120},
      {fixed:'right', title:'操作', toolbar:'#barDemo', width:150}
    ]],
    page: true
  });
  
  //监听单元格编辑
  table.on('edit(test)', function(obj){
    var value = obj.value; //得到修改后的值
    var data = obj.data; //得到所在行所有键值
    var field = obj.field; //得到字段
    
    //更新到后台
    $.ajax({
      type: "POST",
      url: "/demo/table/edit/",
      data: {
        id: data.id,
        field: field,
        value: value
      },
      success: function(res){
        if(res.code === 0){
          layer.msg(res.msg);
        }else{
          layer.msg(res.msg, {icon: 5});
        }
      },
      error: function(){
        layer.msg('网络错误，请稍后重试！', {icon: 5});
      }
    });
  });
  
  //监听下拉框
  form.on('select', function(data){
    var value = data.value; //得到选中的值
    var field = data.elem.name; //得到所在字段
    
    //更新到后台
    $.ajax({
      type: "POST",
      url: "/demo/table/edit/",
      data: {
        id: data.elem.dataset.id,
        field: field,
        value: value
      },
      success: function(res){
        if(res.code === 0){
          layer.msg(res.msg);
        }else{
          layer.msg(res.msg, {icon: 5});
        }
      },
      error: function(){
        layer.msg('网络错误，请稍后重试！', {icon: 5});
      }
    });
  });
  
  //渲染下拉框
  table.on('renderTest', function(obj){
    var select = '<select name="sex" lay-filter="sex" data-id="' + obj.data.id + '"><option value="男">男</option><option value="女">女</option></select>';
    obj.tr.find('td:eq(2)').html(select);
    form.val('test', {
      'sex': obj.data.sex
    });
    form.render('select');
  });
  
  //渲染工具栏
  table.on('toolbar(test)', function(obj){
    if(obj.event === 'add'){
      //添加操作
      layer.msg('添加操作');
    }
  });
});

在上面的代码中，我们使用了 `templet` 属性来渲染下拉框，并在 `renderTest` 事件中使用 `form.val()` 方法来回显已有的数据。在 `form.on('select')` 事件中，我们将修改后的值更新到后台。