layui中select切换数据_layui 根据后台数据动态创建下拉框并同时默认选中的实例，...

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 根据后台数据动态创建下拉框并同时默认选中的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持3672js教程。

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。