Twig

Question

我有 2 个输入字段。第一个有一些下拉选项。第二个也有一些选择，但它会根据第一个输入更改选择。

第一次输入：

<select name="des" id="des" class="selectpicker form-control">
    <option selected disabled> -- </option>
    {% for dep in department %}
       <option>{{ dep.description }}</option> 
    {% endfor %}  
</select>

想法 #1： 它想到了 {% set value = "value of first input" %} 并用 if-else 捕获它。第二个输入可以这样开始：

<select name="des-spz" id="des-spz"
  {% for dep in department %}
    {% if dep.fid == value %}
      <option>{{ dep.description }}</option>
    {% endif %}
  {% endfor %}
</select>

但是我不知道怎么设置这个值。

想法 #2： 我还想过通过 jquery 捕获输入值并附加选项 喜欢：

$('#des').on('change', function()  {
  if($('#des').val() == 'Anwendungssupport'){
    $('.des-spz').append(
      '<option >Cloud</option>'
    );
});

但是追加不起作用，实际上很难编写每个可能的下拉选项而不是用 twig 循环。

Answer 1

像往常一样，在发布问题后我自己找到解决方案...

想法 #2 的解决方案：

$('#bereichdes').on('change', function()  {
  if($('#des').val() == 'Anwendungssupport'){
    $("#des-spz").empty().append(
      '<option value="--"> -- </option>' +
      '<option value="cloud">Cloud</option>'
    );
    $('#des-spz').selectpicker('refresh');

  } else if($('#des').val() == 'Gerätesupport') {
    $("#des-spz").empty().append(
      '<option value="--"> -- </option>' +
      '<option value="bildschirm">Bildschirm</option>'
    );
    $('#des-spz').selectpicker('refresh');
  }
});

2 件事：
1. 添加选项后需要刷新选择器
2. 在第一个输入中选择另一个值后，需要使用 .empty()

清除第二个输入中的选项

但是要全部手写而不是循环遍历还是很难..

Answer 2

好的，我有解决办法：

我只需要绕过 jquery 段：

解法： “--”选项的单独 Jquery 因为你没有通过“--”选项循环。

$('#des').on('change', function()  {
  if($('#des').val() == 'Anwendungssupport'){
    $("#des-spz").empty().append(
      '<option value="--"> -- </option>'
    );
    $('#des-spz').selectpicker('refresh');
  }
});

然后循环浏览您想要的其余选项：

{% for dep in department %}
  {% for i in 1..12 %}
  {% set numb = '10000' ~ i %}
    {% if dep.fid == numb  %}
    <script>
    $(document).ready( function() {
      $('#des').on('change', function()  {
        if($('#des').val() == 'Anwendungssupport'){
          $("#des-spz").append(
            '<option value="{{ dep.description }}">{{ dep.description }}</option>' 
          );
          $('#des-spz').selectpicker('refresh');

        } 
    });
  });
  </script>
{% endif %}  
{% endfor %}

别忘了刷新选择器 ;) 再见，下次见！

Twig - 2个输入字段 - 第二个输入字段应根据第一个输入而改变

Twig - 2 Input fields - Second input field should change depending on the first input

html

jquery