javascript - 在 Symfony 2 中使用 javascript 添加选择

Question

我想提出一个我遇到的问题，但不知道如何解决。假设我想创建一个动态选择，即，如果选择一个产品，如果我添加或删除一个产品，选择会自动更新。例如，可以像这样在 Controller 中进行查询:

$products = $em->getRepository('MyBundle:Entity')->findAll();

然后这样渲染:

return $this->render('MyBundle:myfolder:mytwig.html.twig', array("products" => $products));

最后在我的模板中，像这样创建我的选择:

<select>
{% for product in products %}
<option value="{{ product.name }}">{{ product.name }}</option>
{% endfor %}
</select>

我的问题是我有一个选择，用户可以在其中选择购买产品，如果您想添加另一个，请通过标有“添加”的按钮启用 javascript，因此会生成另一个选择，您可以在其中选择另一个产品.

我已经制作了 javascript 文件，但是如果我在产品中使用 Twig 无法识别我，即，我无法使用 javascript 添加它:

<select>
    {% for product in products %}
    <option value="{{ product.name }}">{{ product.name }}</option>
    {% endfor %}
</select>

很久以来我一直在做这个，如果你能帮助我，请。谢谢

Answer 1

如果您更改模板以生成 <SELECT> 的“基本”副本，则可以单独使用 JavaScript 来完成此操作像这样(为简洁起见假设使用 jQuery):

<div id='products_list'>
    <select>
    {% for product in products %}
      <option value="{{ product.name }}">{{ product.name }}</option>
    {% endfor %}
    </select>
</div>
<button id='AddProduct'>Add</button>
<script>
  $('#AddProduct').on('click', function () {
    var base = $('#products_list select:first');
    base.parent().append(base.clone());
  });
</script>

( demo )