javascript - 将数据附加到 <script>

Question

我有时会克隆一行。

<script id="SubRow10" type="text/template">
  <select id="SubSelect10" class="form-control" name="SubcategorySelect" required>
    <option value="m,2">Op1</option>
    <option value="m,3">Op2</option>
    <option value="m,5">Op3</option>
    <option value="m,6">Op4</option>
  </select>
</script>

我有一个表单可以向 "#Subselect10" 添加一个选项但是当我这样做时:

$('#SubSelect10').append('<option value="m,8">Op5</option>');

它不起作用，但是当我这样做时:

$('#SubRow10').append('<option value="m,8">Op5</option>');

它可以工作，但不会将其添加到“选择”菜单。

有人能指引我正确的方向吗？

这是一个JSFiddle

Answer 1

这样做:

var template = $('#SubRow10');

template.html($(template.html()).append('<option value="m,8">Op5</option>'));

console.log(template.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="SubRow10" type="text/template">
  <select id="SubSelect10" class="form-control" name="SubcategorySelect" required>
    <option value="m,2">Op1</option>
    <option value="m,3">Op2</option>
    <option value="m,5">Op3</option>
    <option value="m,6">Op4</option>
  </select>
</script>

问题是 <script>标签不会将其内容呈现为 HTML，而是呈现为文本，即使 type不是 text/javascript .为了规避这个问题，你需要在注入(inject)另一个之前将内容解析为HTML <option> .