layui框架中给laytpl模板里的select赋值
时间: 2023-05-18 18:02:44 浏览: 113
layui前端框架-其他
可以使用laytpl模板中的{{# each}}和{{# select}}语法来给select赋值,具体代码如下:
HTML代码:
<select name="city">
<option value="">请选择城市</option>
{{# each(d.cityList) }}
{{# select d.selected === this.name }}
<option value="{{this.name}}" selected>{{this.name}}</option>
{{# else }}
<option value="{{this.name}}">{{this.name}}</option>
{{/select}}
{{/each}}
</select>
JavaScript代码:
var data = {
cityList: [
{ name: '北京' },
{ name: '上海' },
{ name: '广州' },
{ name: '深圳' }
],
selected: '上海'
};
laytpl($('#tpl').html()).render(data, function(html){
$('#container').html(html);
});
其中,d.cityList是一个包含城市列表的数组,d.selected是当前选中的城市名称。在模板中使用{{# each}}遍历城市列表,使用{{# select}}判断当前城市是否被选中,如果是则添加selected属性,否则不添加。最终渲染出来的HTML代码如下:
<select name="city">
<option value="">请选择城市</option>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
阅读全文