Symfony:Hide/Show 表单元素依赖于带有数据库条目的下拉选择

Symfony: Hide/Show form element dependent on dropdown selection with database entries

我希望我的标题是正确的:我有一个下拉菜单,它来自作为 EntityType 的表单,值来自实体 class。代码:

   ->add('type', EntityType::class, array(
      'class' => 'DocumentBundle:DocumentType',
      'label' => 'label.type',
      'property' => 'translationKey',
      'required' => true,
      'multiple' => false,
      'expanded' => false,
      'empty_value' => 'label.select_type',
      'choice_translation_domain' => 'Documents'
      ))
  ->add('vka_number', 'text', array(
      'label' => 'label.vka_number',
      'required' => false,
      'translation_domain' => 'Documents'))

第二个是文本字段 (vka_number),我只想在从该下拉列表中选择特定值时显示它 在我的树枝模板中,我渲染了元素:

<div class="row">
  <div class="col-md-6" id="documentDropdown">
    {{ form_row(form.type) }}
  </div>

  <div class="col-md-6" id="vka">
    {{ form_row(form.vka_number) }}
  </div>
</div>

我在想 javascript 这样的函数:

<script>
    $(document).ready(function(){
    $('#documentDropdown').on('change', function(){
       if (this.value == 'Contract')
       {
         $('#vka').show();
       }
        else {
         $('#vka').hide();
       }
    });
    });
    </script>

但它不起作用,我认为这是因为它无法访问下拉列表中的值,因为它们不是硬编码的,而是数据库条目。 'Contract' 将是 "makes" vka_number 文本字段出现的条目 (id=1)。

我从 your previous question Sonja 复制了 html 代码,您似乎一直在问同样的问题。我在这个 jsfiddle 中使用了该代码:

https://jsfiddle.net/alvinbunk/to9qodwx/

您可以使用 jsfiddle 来试验您的 jQuery 代码以找出问题所在。如您所见,代码确实有效并且确实隐藏了 vka id 分区。它确实与值来自数据库这一事实无关。确保您的 html 代码中的各种元素没有重复的 ID。在浏览器中使用 "view source" 查看呈现的代码。

顺便说一句,我在这个答案上至少花了 15 分钟,在另一个上也花了 15 - 30 分钟。请注意,Whosebug 上的人都很忙,能把你的问题问清楚就好了。


编辑 #2 - 基于评论

使用此 jQuery 代码:

<script>
$(document).ready(function(){
$('#documentDropdown').on('change', function(){
   if (this.value == '1')
   {
     $('#vka').show();
   }
    else {
     $('#vka').hide();
   }
});
});
</script>

应该可以。

这是我的 javascript 函数,它最终解决了我的问题。

 $(document).ready(function () {
    $('#type ').change(function() {
         if ($('select[id$="_type"]>option:selected').text() == "Contract") {
            $('#vka_number ').show();
        }
        else {
          $('#vka_number').hide();
        }
    });
});