Question

我有一个菜单选择＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;由表单生成，我想隐藏在树枝中的一些东西，而用户没有从菜单选择中选择任何东西。这是我的表格：

many-to-one

树枝：

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' ));
}
}

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

我对表单不太满意我尝试将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();
});

Answer 2

您可以使用Jquery执行此操作：

<style type="text/css">
    .hidden {
        display: none;
    }
</style>

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

<div class="hidden">
    <!-- 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> 
</div>

<script>
  jQuery(function($) {
     $('#idOfYourSelectInput').change(function(){
        $('.hidden').show();
     });
  });
</script>

表单时隐藏元素（菜单选择选项为空）

2 个答案: