可以通过
监听下拉框的change事件，在事件处理函数中根据
选中的
值展示不同的表单元素。
示例代码如下：
HTML代码：
```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代码：
```javascript
layui.use(['form'], function() {
var form =
layui.form;
//
监听下拉框的change事件
form.on('
select(type)', function(data) {
var value = data.value;
// 隐藏所有表单元素
$('#text,#checkbox,#radio').h
ide();
// 显示
选中的表单元素
$('#' + value).show();
});
});
```
在上面的示例中，我们给
下拉框添加了一个lay-filter属性，表示需要
监听下拉框的change事件。在事件处理函数中，我们
获取到
选中的
值，然后根据
值来隐藏或显示相应的表单元素。最后，我们需要调用form.render()方法来重新渲染表单元素，否则可能会出现样式问题。
本文介绍了一个使用form模块实现的省份选择下拉菜单事件监听案例。当用户选择省份时，通过监听'select'事件，获取所选省份的ID和名称，并重新渲染表单。此方法适用于创建动态响应的表单界面。
扫一扫
3897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
