Elemente verbergen, wenn Formular (Menüauswahl ist leer)

Question

Ich habe ein Menü Auswahl von '' Themen '' durch ein Formular generiert, ich möchte einige Sachen in den Zweig ausblenden, während der Benutzer nichts aus dem Menü wählte wählen. Das ist meine Form:

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

Der Zweig:

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

Ich bin nicht sehr gut mit der Form habe ich versucht, eine ID in das Formular dann mit Javascript Scheck zu geben Wenn das Menü leer ist, aber ich weiß nicht, wie es geht

Vielen Dank im Voraus für eine Sie können mir

geben

Answer 1

Sie könnten jQuery verwenden, um die Arbeit zu erledigen.

Zuerst müssen Sie die generierte ID für Ihre Elemente sehen. Dies ist so einfach, wie mit der rechten Maustaste auf sie in Ihrem Browser und wählen Sie "Inspizieren". Dies zeigt Ihnen den DOM-Baum der Seite mit dem Knoten, der dem ausgewählten Element entspricht.

Geben Sie allen Objekten, die Sie ausblenden möchten, eine gemeinsame CSS-Klasse.

Dann müssen Sie einfach eine Javascript-Code ähnlich hinzuzufügen: kann

$(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

Sie Jquery, dies zu tun verwenden:

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