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

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

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

第二步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根据后台数据动态创建下拉框并同时默认选中的实例
本文链接:http://bzwzjz.com/article/gpcopc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 品牌网站建设 手机网站制作 网站制作公司 网站建设方案 企业网站建设 专业网站设计 成都网站建设 营销网站建设 成都网站设计 成都企业网站设计 温江网站设计 专业网站建设 网站制作 成都网站制作 高端定制网站设计 成都网站建设 营销型网站建设 营销网站建设 手机网站建设 网站建设公司 四川成都网站设计 成都网站设计