通过 querySelector 函数设置选定值

Question

我使用 <template> 元素来呈现 table 的行。一个连续的 <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 ...
设置所选选项的更简单方法是在 <select> 元素本身上设置 value。
最后：

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 函数设置选定值

setting selected value via querySelector function

javascript

drop-down-menu

jquery-selectors

selectors-api