layui根据后台数据动态创建下拉框并同时默认选中的实例

第一步form表单里写好一个下拉框

创新互联建站专业为企业提供应城网站建设、应城做网站、应城网站设计、应城网站制作等企业网站建设、网页设计与制作、应城企业网站模板建站服务，十载应城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

<div class="layui-form-item">
 <label class="layui-form-label">下拉选择框</label>
 <div class="layui-input-block">
 <select id="selectId" name="interest" lay-filter="city">
 </select>
 </div>
 </div>

第二步layui 加载jquery模块动态给select添加option

layui.use(['form','jquery'], function(){
	
 //----------模块----------
 var form = layui.form,$=layui.$;
 
 //动态添加下拉框 同时可以设置默认值
 $.ajax({
 url:'../json/selectId.json',
 dataType:'json',
 //type:'post',
 success:function(data){
 
 $.each(data,function(index,item){
 	console.log(item);
 	//option 第一个参数是页面显示的值，第二个参数是传递到后台的值
 	$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜单里添加元素
 	//设置value（这个值就可以是在更新的时候后台传递到前台的值）为2的值为默认选中
 	$('#selectId').val(2);
 })
 
 form.render(); //更新全部表单内容
		//form.render('select'); //刷新表单select选择框渲染
 }
 });
});

模拟后台传递过来的json数据

[
 {
 "cityName":"上海",
 "cityId":"1"
 },
 {
 "cityName":"杭州",
 "cityId":"2" 
 },
 {
 "cityName":"深圳",
 "cityId":"3" 
 },
 {
 "cityName":"北京",
 "cityId":"4" 
 }
]

展示（默认选中cityId=2 即杭州这一项）

layui 根据后台数据动态创建下拉框并同时默认选中的实例

以上这篇layui 根据后台数据动态创建下拉框并同时默认选中的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

网站栏目：layui根据后台数据动态创建下拉框并同时默认选中的实例
分享网址：https://www.cdcxhl.com/article32/gpcopc.html

成都网站建设公司_创新互联，为您提供响应式网站、网站排名、App设计、关键词优化、服务器托管、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容