Question

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

<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>

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

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

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

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

事实上，使用相同的脚本，我想添加div id="showOption" 填充 div id="content1" 和 {{1通过在我的初始选择标记中选择一个值， div id="showCategory"。

我该怎么办？

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>

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

1 个答案: