title: setting selected value via querySelector function
body: <p>I use <code>&lt;template&gt;</code> element to render a table's row. A <code>&lt;select&gt;</code> element inside in a row and I try to set selected value but the code didn't work for me. </p>
  
  <pre><code>&lt;template id="template"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select class="form-control status"&gt;
                  &lt;option value="1"&gt;In Progress&lt;/option&gt;
                  &lt;option value="2"&gt;Done&lt;/option&gt;
                  &lt;option value="3"&gt;Canceled&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Than I call this function below.</p>
  
  <pre><code>$.each(data.Object, function (index, item) {
  
              var template = document.querySelector('#template');
  
              template.content.querySelector('.select &gt; option[value="' + item.Status + '"]').selected = true;
  
  
              var cloneAction = document.importNode(template.content, true);
              var tbody = document.querySelector("#mytbody");
              tbody.appendChild(cloneAction);
  
  
          })
  </code></pre>