layui下拉选中的值怎么回填

1. layui下拉选中的值回填的解决方案

下拉选择框是前端开发中常见的组件之一。而在layui中使用下拉选择框非常方便，但是在实际应用中，我们常常需要将选择的值回填到界面上。那么这个问题该怎么解决呢？

2. layui下拉选择框的使用方法

在介绍如何回填下拉选择框的值之前，我们先来了解一下layui下拉选择框的使用方法。

在layui中，下拉选择框是通过select组件来实现的。具体使用方法如下：

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

其中，name表示该select组件的名称，lay-filter表示该组件的过滤器，可以在js中使用该过滤器来获取组件的值。option表示下拉选择框的选项。

2.1 layui下拉选择框的渲染

在页面加载完成后，可以通过form.render()函数对所有的组件进行渲染，该函数会自动将下拉选择框进行渲染。

layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
  
  //渲染select组件
  form.render('select');
});

注意，上面的代码中，'select'表示对所有的下拉选择框进行渲染，如果只要对某一个下拉框进行渲染，则可以将'select'替换为该下拉框的lay-filter属性。

2.2 layui下拉选择框监听事件

在layui中，可以通过form.on()函数来监听下拉选择框的选择事件，具体方法如下：

layui.use('form', function(){
  var form = layui.form;
  
  //监听select组件的选择事件
  form.on('select(city)', function(data){
    console.log(data.value); //得到被选中的值
    console.log(data.elem); //得到select原始DOM对象
    console.log(data.othis); //得到美化后的DOM对象
  });
});

这里的'city'就是select组件的lay-filter属性。

3. layui下拉选择框值回填的实现方法

在实际应用中，我们常常需要将选择的值回填到界面上。而在layui中，可以通过form.val()函数来实现，具体方法如下：

layui.use('form', function(){
  var form = layui.form;
  
  //给select组件设置默认值
  form.val('filter', {
    "city": "北京"
  });
});

其中，'filter'表示该select组件的lay-filter属性。注意，设置默认值之前，必须先对所有组件进行渲染。

有些时候，我们需要动态地获取下拉选框的选项，然后将选中的值回填到界面上。这时，我们需要在获取到选项后，通过form.val()函数来设置下拉选框的选中值。

//动态获取下拉选框选项并设置默认值
function setSelectValue() {
  ...
  //获取到选项
  $.ajax({
    url: 'xxx',
    type: 'get',
    ...
    success: function(data) {
      //给select组件设置默认值
      layui.use('form', function(){
        var form = layui.form;
        form.val('filter', {
          "city": data.city
        });
      });
    }
  });
}

4. 总结

通过上面的介绍，我们可以看到，在layui中回填下拉选择框的值非常方便。只需要通过form.val()函数来设置默认值即可。但是，在设置默认值之前，必须先对所有组件进行渲染。

同时，我们还介绍了layui下拉选择框的使用方法，包括渲染和监听事件。

希望本文对于大家在使用layui下拉选择框时有所帮助！