我使用<template>
元素来渲染表格的行。一行中的<select>
元素,我尝试设置选定的值,但代码对我不起作用。
<template id="template">
<tr>
<td>
<select class="form-control status">
<option value="1">In Progress</option>
<option value="2">Done</option>
<option value="3">Canceled</option>
</select>
</td>
</tr>
</template>
比我在下面调用此函数。
$.each(data.Object, function (index, item) {
var template = document.querySelector('#template');
template.content.querySelector('.select > option[value="' + item.Status + '"]').selected = true;
var cloneAction = document.importNode(template.content, true);
var tbody = document.querySelector("#mytbody");
tbody.appendChild(cloneAction);
})
答案 0 :(得分:1)
有几件事:
select ...
而不是.select ...
value
元素本身上设置<select>
。看起来某些状态信息在document.importNode()
上丢失了,所以您需要等到克隆元素设置该状态:
var template = document.querySelector('#template');
//Works:
template.content.querySelector('label').textContent = item.Name;
template.content.querySelector('input').checked = true;
//Doesn't work until the elements is cloned:
//template.content.querySelector('select').value = item.Status;
var cloneAction = document.importNode(template.content, true);
//Now it works:
cloneAction.querySelector('select').value = item.Status;