layui 的 select、checkbox、radio、switch表单控件不渲染,不显示
layui 的 select、checkbox、radio、switch表单控件不渲染,不显示
当你使用表单时,layui 会对 select、checkbox、radio、switch 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以必须加载 form,并且执行一个实例。同时,所有的表单控件必须放在
中,否则也不能渲染。正确写法:
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
//……
//但是,如果你的HTML是动态生成的,自动渲染就会失效
//因此你需要在相应的地方,执行下述方法来进行渲染
//form.render();
});
</script>
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果