以相同的方式在同一页面的两个不同的div中加载ajax内容

Question

使用Twig和php，我的html页面中有三个主要的div：

<select class="form-control" id="choice" name="form[choice]">
  <option value="" disabled selected>make a choice</option>
  <!-- here the path variable matches with an url -->
  <option value="{{ path('get_data_by_choice', {'slug': variable.slug}) }}">
    {{ variable.name }} 
  </option>
</select>

<div id="showOption"></div>

<div id="showCategory">

通过jQuery脚本，我在div中返回页面内容（在<div id="showOption"></div ）

看一下脚本：

<script>
  $('#choice').change(function() {
      var url = $(this).val();
      $.get(url , {} , function(showAvailableConfig) {
          $("#showOption").html(showAvailableConfig));
      })
  });
</script>

因此，它返回id="ShowOption"的div中与变量{{ path('get_data_by_choice', {'slug': variable.slug}) }}匹配的url中页面的所有内容。

这是我通过脚本加载的页面的内容：

<div id="content1"> some content1 here </div>

<div id="content2"> some other content2 here </div>

事实上，同样的剧本，我想追加，填充div id="showOption" 与 div id="content1" 和 div id="showCategory" 与 div id="content2"选择一个值在我最初的选择标签中。

我该如何进行？

Answer 1

您可以使用新数据创建一个jQuery对象，以便可以过滤div ，然后附加它们。

<script>
  $('#choice').change(function() {
      var url = $(this).val();
      $.get(url , {} , function(showAvailableConfig) {
          var newContent = $(showAvailableConfig);
          $("#showOption").html( newContent.filter("#content1") );
          $("#showCategory").html( newContent.filter("#content2") ));
      })
  });
</script>