javascript - 表单时隐藏元素(菜单选择选项为空)

Question

我有一个由表单生成的“主题”菜单选择，我想在用户没有从菜单选择中选择任何内容时隐藏 Twig 中的一些内容。这是我的表格:

class CollapsideColleFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('colles', EntityType::class, array(
            'class' => 'PACESColleBundle:Colle',
            'attr' => array( 'class' => 'browser-default colles' ),
            'choice_label' => 'nom',
            'label' => false,
            'group_by' => 'matiere',
            'required' => true,
            'placeholder' => 'Choisissez une colle' ));
}
} 

Twig :

<fieldset style='display: inline; border: 2px solid deepskyblue;'>
<!-- Menu SELECT OF COLLES -->
<legend> Choix de la colle</legend> {{ form_widget(formColle.colles) }}

<!-- STUFF TO HIDE when the user didn't choose a ''colle'' -->
<!-- Note  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
<legend> Note </legend>
</fieldset>

    <!-- Classement  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
    <legend> Classement </legend>
</fieldset><br><br>

<!-- Moyenne  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
    <legend> Moyenne </legend>
</fieldset>

<!-- Médiane  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
    <legend> Médiane </legend>
</fieldset>

<!-- Major  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
    <legend> Major </legend>
</fieldset>

<!-- Minor  -->
<fieldset style='display: inline; border: 2px solid deepskyblue;'>
    <legend> Minor </legend>
</fieldset> 

我不太擅长表单，我尝试为表单提供一个 ID，然后使用 Javascript 检查菜单选择是否为空，但我不知道该怎么做

预先感谢您为我提供的任何帮助

Answer 1

您可以使用 jQuery 来完成工作。

首先，您必须查看为元素生成的 ID。这就像在浏览器上右键单击它们并选择“检查”一样简单。这将向您显示页面的 DOM 树，其中突出显示与所选元素相对应的节点。

此外，为您想要隐藏的所有项目提供一个通用的 CSS 类。

然后您只需添加类似于以下的 JavaScript 代码:

$(document).ready(function(){
  $('#id-of-the-select-element').change(function(){
    if($(this).val())
    {
      $('.class-for-all-the-hiddable-elements').show();
    }
    else
    {
      $('.class-for-all-the-hiddable-elements').hide();
    }
  });
  $('#id-of-the-select-element').change();
});