I'm trying to create a form with some display: block/none system with select field, but I've got a weird behaviour:

When I display block a div that I had display none before, the children of this div don't take the display block but keep the display none. I've tried this with visibility option but same behaviour.

How can I correct it ? Is that a normal behaviour ?

Many thanks !

<div >
                <div >
                    <select  name="even_type" required>
                        @foreach($even_types as $type)
                            @if ($type->id == 1)                                        
                                <option value="{{ $type->id }}" selected>{{ $type->nom }}</option>
                            @endif
                        @endforeach
                    </select>    
                    <label for="even_type">Type d'évenement <span >*</span></label>
                </div>
                <div >
                    <select  name="ville" onchange="changeMdn(this.value)" required>                                     
                        <option value="angers" selected>Angers</option>
                        <option value="boulogne">Boulogne-Billancourt</option>
                        <option value="defense">La Défense</option>
                        <option value="lorient">Lorient</option>
                        <option value="nantes">Nantes</option>
                        <option value="rouen">Rouen</option>
                    </select>    
                    <label for="ville">Type d'évenement <span >*</span></label>
                </div>
            </div>
            <div id="mdnSpaces">
                <div id="angersSpaces" style="display: block;">
                    angers
                    <div >
                        <select  name="ville" onchange="changeAngersMdn(this.value)" required>                                     
                            <option value="ralliment" selected>Place du Ralliement</option>
                            <option value="lenepveu">Rue Lenepveu</option>
                            <option value="pilori">Place du Pilori</option>
                        </select>    
                        <label for="ville">Type d'évenement <span >*</span></label>
                    </div>
                    <div id="angersEmplacement">
                        <div id="angersSpacesralliment">
                            {{ Form::open(['route' => 'mdn.angers.ralliement.create']) }}
                                ralliment
                            {{ Form::close() }}
                        </div>
                        <div id="angersSpaceslenepveu" style="display: none;">
                            {{ Form::open(['route' => 'mdn.angers.lenepveu.create']) }}
                                lenepveu
                            {{ Form::close() }}
                        </div>
                        <div id="angersSpacespilori" style="display: none;">
                            {{ Form::open(['route' => 'mdn.angers.pilori.create']) }}
                                pilori
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
                <div id="boulogneSpaces" style="display: none;">
                    {{ Form::open(['route' => 'mdn.boulogne.create', 'id' => 'boulogneMdnForm']) }}
                        boulogne
                    {{ Form::close() }}
                </div>
                <div id="defenseSpaces" style="display: none;">
                    {{ Form::open(['route' => 'mdn.defense.event.create', 'id' => 'defenseMdnForm']) }}
                        defense
                    {{ Form::close() }}
                </div>
                <div id="lorientSpaces" style="display: none;">
                    {{ Form::open(['route' => 'mdn.lorient.create', 'id' => 'lorientMdnForm']) }}
                        lorient
                    {{ Form::close() }}
                </div>
                <div id="nantesSpaces" style="display: none;">
                    {{ Form::open(['route' => 'mdn.nantes.event.create', 'id' => 'nantesMdnForm']) }}
                        nantes
                    {{ Form::close() }}
                </div>
                <div id="rouenSpaces" style="display: none;">
                    {{ Form::open(['route' => 'mdn.rouen.event.create', 'id' => 'rouenMdnForm']) }}
                        rouen
                    {{ Form::close() }}
                </div>
            </div>

function changeAngersMdn(emplacement){
    const angersEmplacement = document.getElementById('angersEmplacement').getElementsByTagName("div");
    for(var empl of angersEmplacement){
        if(empl.id == 'angersSpaces' emplacement){
            empl.style.display = "block";  
        }else{
            empl.style.display = "none"; 
        }
    }
}

function changeMdn(ville){
    const mdns = document.getElementById('mdnSpaces').getElementsByTagName("div");
    for(var mdn of mdns){
        if(mdn.id == ville 'Spaces'){
            mdn.style.display = "block";       
        }else{
            mdn.style.display = "none"; 
        }
    }
}

CodePudding user response：

You don't need explicit display:none on the children if they are in the DOM tree correctly below their parent, just hide and toggle the parent.

let parents = document.getElementsByClassName('parent');
for(let parent of parents){
  parent.onclick = (ev) => {
    if (ev.target.style.display === "none") {
      ev.target.style.display = "block";
    } else {
      ev.target.style.display = "none";
    }
  }
}

let show = document.getElementById('show');
show.onclick = () => {
  for(let parent of parents){
    parent.style.display = "block";
  }
};

.parent {
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

.child {
  background-color: blue;
  width: 20px;
  height: 20px;
}

#show {
  width: 100px;
  background-color: green;
  cursor: pointer;
}

<div class='parent'>
  click me to hide
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<div class='parent'>
  click me to hide
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<div class='parent'>
  click me to hide
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<div id='show'>show all</div>

CodePudding user response：

I've find what's wrong : I was selecting all div inside parent, that mean it select all div, no matter the level of child the div is. Just change by .getElementByClassName and use a class for select only div i wanted.