フォームが選択されたときに要素を非表示にする

Question

フォームによって生成された「件名」のメニュー選択を取得しました。ユーザーがメニューから何も選択していない間に、選択します。 これは私のフォームです：

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

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

私はJavascriptをチェックして、その後、フォームにIDを与えることを試みた形と非常によくないですメニュー選択が空ですが、それを行う方法がわからない場合

ありがとうございますあなたが私に与えることができる助けてください

Answer 1

あなたはjQueryを使用して仕事を得ることができます。

まず、要素の生成IDを確認する必要があります。これはブラウザ上で右クリックして "Inspect"を選択するのと同じくらい簡単です。選択した要素に対応するノードが強調表示されたページの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>