javascript - 通过 querySelector 函数设置所选值

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/