通过querySelector函数设置选定的值

时间:2017-04-21 07:47:16

标签: javascript drop-down-menu jquery-selectors selectors-api

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


        })

1 个答案:

答案 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;

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