【四二学堂】layui动态生成下拉框，复选框，单选框，并默认选中（适用场景：查看或编辑回显）

原贴地址：http://www.jingyingjidi.com/talk/html/jie/detail.html?id=b212e1aa6c444bf5b40009412b51568b

 

可以改写成ajax动态获取，这里是写死了几个选项，做个示例，怎么样动态生成下拉框，复选框，单选框，并默认选中

在编辑，查看页面我们经常需要这么做。

1.html

代码如下：

<form class="layui-form" lay-filter="test1aa">
	<div class="layui-form-item">
		<label for="username" class="layui-form-label">
          <span class="we-red">*</span>用户名
      </label>
		<div class="layui-input-inline">
			<input type="text" id="username" name="username" required="" lay-verify="required" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label for="username" class="layui-form-label">
          <span class="we-red">*</span>支付方式
      </label>
		<div class="layui-input-inline">
			<select name="contrller" id="contrller">

			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label for="L_email" class="layui-form-label"><span class="we-red">*</span>发票抬头</label>
		<div class="layui-input-inline">
			<input type="text" id="L_email" name="email" required="" lay-verify="email" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">
			<span class="we-red">*</span>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">复选框</label>
		<div class="layui-input-block" id="likeCheckBox">

		</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" id="sexRadio">

		</div>
	</div>
</form>

2.js代码如下

layui.use(['form', 'admin', 'jquery', 'table', 'layer'], function() {
	var form = layui.form,
		admin = layui.admin,
		$ = layui.jquery,
		table = layui.table,
		layer = layui.layer;
		
	
	//动态生成下拉框并回显选中
		
	$('#contrller').append(new Option("支付方式", "1"));
	$('#contrller').append(new Option("支付宝", "2"));
	$('#contrller').append(new Option("微信", "3"));
	$('#contrller').append(new Option("货到付款", "4"));
	$('#contrller').append(new Option("赊账", "5"));
	
	layui.form.render("select");
	
	//复选框动态添加
	$('#likeCheckBox').append('<input type="checkbox" name="like[write]" title="写作">');
	$('#likeCheckBox').append('<input type="checkbox" name="like[read]" title="阅读">');
	$('#likeCheckBox').append('<input type="checkbox" name="like[dai]" title="发呆">');
	$('#likeCheckBox').append('<input type="checkbox" name="like[qu]" title="我去">');
	
	
	//动态添加单选框
	$('#sexRadio').append('<input type="radio" name="sex" value="0" title="男">');
	$('#sexRadio').append('<input type="radio" name="sex" value="1" title="女">');
	$('#sexRadio').append('<input type="radio" name="sex" value="2" title="不男不女">');
	
	//初始化表单赋值
	//查看或编辑回显
	form.val("test1aa",{
		"username":"沾上干",
		"contrller":"5",
		"like[qu]":true,
		"sex":"2"
	});
});