layui form表单中下拉框选中以后,隐藏单选框
时间: 2023-11-15 12:28:49 浏览: 121
您可以使用layui的form模块和jQuery来实现该功能。具体实现步骤如下:
1. 给下拉框和单选框分别添加一个id,以便在后面的代码中进行操作。
```html
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select id="my-select" name="city">
<option value="">请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-inline">
<input type="radio" id="my-radio" name="sex" value="男" title="男">
<input type="radio" id="my-radio" name="sex" value="女" title="女">
</div>
</div>
</form>
```
2. 编写jQuery代码,在下拉框选中后隐藏单选框。
```html
<!-- 引入jQuery和layui -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
<script>
// 初始化layui表单
layui.use('form', function(){
var form = layui.form;
form.render();
// 监听下拉框选择事件
form.on('select(city)', function(data){
// 获取选择的城市
var city = data.value;
// 如果选择的是“北京”,则隐藏单选框
if(city == '北京'){
$('#my-radio').hide();
}else{
$('#my-radio').show();
}
});
});
</script>
```
在上面的代码中,我们首先初始化了layui表单,然后监听了下拉框的选择事件。当选择的城市为“北京”时,我们使用jQuery的hide()方法来隐藏单选框;否则使用show()方法来显示单选框。
需要注意的是,这里我们给下拉框和单选框分别设置了相同的id,这不是规范的做法,因为id应该是唯一的。实际开发中应该给它们分别设置不同的id。
阅读全文