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

今天，长沙网络推广带来一篇关于layui如何根据后台数据动态创建下拉框并默认选中的精彩实例。这一实例对于大家来说，无疑具有很好的参考价值。接下来，让我们一同跟随长沙网络推广的步伐，来深入了解这个实用的功能。

我们在form表单里创建一个基本的下拉框，作为我们的起点。这个下拉框将用于展示后台传递过来的数据。

```html

```

接下来，我们使用layui加载jquery模块，以便动态给select添加option。这样，我们就可以根据后台数据来填充我们的下拉框了。

```javascript

layui.use(['form','jquery'], function(){

var form = layui.form;

var $ = layui.$;

// 动态添加下拉框，并设置默认值

$.ajax({

url: '../json/selectId.json',

dataType: 'json',

success: function(data){

//遍历后台传递的数据，并添加到下拉框中

$.each(data, function(index, item){

console.log(item);

// option的第一个参数是页面显示的值，第二个参数是传递到后台的值

$('selectId').append(new Option(item.cityName, item.cityId)); //向下拉菜单里添加元素

// 设置默认选中的值，这里我们默认选中cityId为2的选项（即杭州）

$('selectId').val(2);

});

form.render(); //更新全部表单内容

}

});

});

```

模拟后台传递过来的json数据格式如下：

```json

[

{

"cityName": "上海",

"cityId": "1"

},

{

"cityName": "杭州",

"cityId": "2"

},

{

"cityName": "深圳",

"cityId": "3"

},

{

"cityName": "北京",

"cityId": "4"

}

]

```

最终展示的效果是，我们的下拉框会根据后台数据动态生成选项，并且默认选中cityId为2的选项（即杭州）。以上就是长沙网络推广为大家分享的layui根据后台数据动态创建下拉框并默认选中的实例的全部内容，希望大家能够从中获得启示，并多多支持狼蚁SEO。 灏辰设计工作室祝愿每一位读者都能在技术道路上不断前行，创造更多价值。