layui下拉框数据回显
时间: 2023-06-21 13:11:39 浏览: 113
好的,关于您提出的问题,我可以为您提供以下解决方案:
1. 在页面加载时,需要从后台获取下拉框的数据和需要回显的数据,并将其赋值给对应的下拉框和文本框。
2. 在下拉框绑定数据时,需要将回显的数据作为默认选中项。可以使用select的selected属性来实现。
3. 如果需要动态改变选中项,可以在下拉框的change事件中获取选中的项,并将其赋值给文本框。
以下是一个基本的示例代码:
HTML代码:
```
<select id="sel" onchange="change()">
<option value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="text" id="txt" name="txt" />
```
JavaScript代码:
```
// 从后台获取下拉框数据和需要回显的数据
var data = {
list: [
{ value: 'A', text: 'A选项' },
{ value: 'B', text: 'B选项' },
{ value: 'C', text: 'C选项' }
],
selected: 'B'
};
// 绑定下拉框数据
var sel = document.getElementById('sel');
for (var i = 0; i < data.list.length; i++) {
var option = document.createElement('option');
option.value = data.list[i].value;
option.text = data.list[i].text;
sel.add(option);
}
// 设置默认选中项
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].value == data.selected) {
sel.options[i].selected = true;
break;
}
}
// 将回显的数据赋值给文本框
document.getElementById('txt').value = data.selected;
// 下拉框change事件
function change() {
var sel = document.getElementById('sel');
var txt = document.getElementById('txt');
txt.value = sel.options[sel.selectedIndex].value;
}
```
希望以上解决方案能够帮到您!如果您还有其他问题,可以继续提出哦。
阅读全文