Question

我使用<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);


        })

Answer 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;

示例：https://jsfiddle.net/8pervtto/

通过querySelector函数设置选定的值

1 个答案: