layui根据下拉框的值展示不同的表单元素

可以通过监听下拉框的change事件，在事件处理函数中根据选中的值展示不同的表单元素。

示例代码如下：

HTML代码：

<div class="layui-form-item">
  <label class="layui-form-label">选择类型</label>
  <div class="layui-input-block">
    <select name="type" lay-filter="type">
      <option value="">请选择</option>
      <option value="text">文本框</option>
      <option value="checkbox">复选框</option>
      <option value="radio">单选框</option>
    </select>
  </div>
</div>

<div class="layui-form-item" id="text" style="display:none">
  <label class="layui-form-label">文本框</label>
  <div class="layui-input-block">
    <input type="text" name="text" lay-verify="required" placeholder="请输入文本" autocomplete="off" class="layui-input">
  </div>
</div>

<div class="layui-form-item" id="checkbox" style="display:none">
  <label class="layui-form-label">复选框</label>
  <div class="layui-input-block">
    <input type="checkbox" name="checkbox1" title="复选框1" value="1">
    <input type="checkbox" name="checkbox2" title="复选框2" value="2">
    <input type="checkbox" name="checkbox3" title="复选框3" value="3">
  </div>
</div>

<div class="layui-form-item" id="radio" style="display:none">
  <label class="layui-form-label">单选框</label>
  <div class="layui-input-block">
    <input type="radio" name="radio" value="1" title="单选框1">
    <input type="radio" name="radio" value="2" title="单选框2">
    <input type="radio" name="radio" value="3" title="单选框3">
  </div>
</div>

JavaScript代码：

layui.use(['form'], function() {
  var form = layui.form;

  // 监听下拉框的change事件
  form.on('select(type)', function(data) {
    var value = data.value;
    // 隐藏所有表单元素
    $('#text,#checkbox,#radio').hide();
    // 显示选中的表单元素
    $('#' + value).show();
  });
});

在上面的示例中，我们给下拉框添加了一个lay-filter属性，表示需要监听下拉框的change事件。在事件处理函数中，我们获取到选中的值，然后根据值来隐藏或显示相应的表单元素。最后，我们需要调用form.render()方法来重新渲染表单元素，否则可能会出现样式问题。