Salut, je veux afficher et masquer les éléments div en fonction de la sélection déroulante. Je sais que cette question a été posée beaucoup de temps et j'ai essayé les méthodes affichées dans l'autre question, mais en vain. Je veux que lors de la première sélection, le premier div ne s'affiche que et lors de la deuxième sélection, le premier et le second div s'affichent, etc. Je ne peux pas penser à un jquery pour faire ceci. Mon code est le suivant: -

$(document).ready(function(){
  $("select").change(function(){
    $(this).find("option:selected").each(function(){
      if($(this).attr("value")=="one"){
        $(".subject").not(".one").hide();
        $(".one").show();
      }
      else if($(this).attr("value")=="two"){
        $(".subject").not(".two").hide();
        $(".two").show();
      }
      else{
        $(".subject").hide();
      }
    });
  }).change();
});
.subject{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="subjects" id="select" class="form-control">
       <option value="">Number of Subjects</option>
       <option value="one">One</option>
       <option value="two">Two</option>
       <option value="three">Three</option>
    </select>

    <div class="one subject" id="one subject">
        <div class="row">
            <div class="col-md-3">
                 <label>Code</label>
                 <input type="text" name="scode1" class="form-control">
            </div>

            <div class="col-md-3">
                 <label>Name</label>
                 <input type="text" name="sname1" class="form-control">
            </div>
        </div>
    </div>

    <div class="two subject" id="two subject">
        <div class="row">
            <div class="col-md-3">
                 <label>Code</label>
                 <input type="text" name="scode2" class="form-control">
            </div>

            <div class="col-md-3">
                 <label>Name</label>
                 <input type="text" name="sname2" class="form-control">
            </div>
        </div>
    </div>

Donc, si l'utilisateur choisit la valeur d'option un, le div avec une classe devrait apparaître s'il choisit la valeur d'option deux, alors les deux div un et deux devraient apparaître et si rien n'est sélectionné, il ne devrait rien montrer. J'ai créé la fonction javascript, elle ne montre qu'un seul div, pas les deux, je ne peux pas penser à un moyen de montrer les deux.Toute aide serait très appréciée. Code Javascript: -

-2
Kushal Srivastava 8 mars 2016 à 14:13

5 réponses

Meilleure réponse

Essaye ça

$('#select').on('change', function(){ 
  $('.subject').hide();
  $('.'+this.value).show();
});
.subject {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select name="subjects" id="select" class="form-control">
       <option value="">Number of Subjects</option>
       <option value="one">One</option>
       <option value="two">Two</option>
       <option value="three">Three</option>
    </select>

    <div class="one two three subject" id="one">
        <div class="row">
            <div class="col-md-3">
                 <label>Code</label>
                 <input type="text" name="scode1" class="form-control">
            </div>

            <div class="col-md-3">
                 <label>Name</label>
                 <input type="text" name="sname1" class="form-control">
            </div>
        </div>
    </div>

    <div class="two three subject" id="two">
        <div class="row">
            <div class="col-md-3">
                 <label>Code</label>
                 <input type="text" name="scode2" class="form-control">
            </div>

            <div class="col-md-3">
                 <label>Name</label>
                 <input type="text" name="sname2" class="form-control">
            </div>
        </div>
    </div>

    <div class="three subject" id="three">
        <div class="row">
            <div class="col-md-3">
                 <label>Code</label>
                 <input type="text" name="scode2" class="form-control">
            </div>

            <div class="col-md-3">
                 <label>Name</label>
                 <input type="text" name="sname2" class="form-control">
            </div>
        </div>
    </div>
0
drosam 8 mars 2016 à 11:24

Ajout d'une nouvelle classe à chaque div nommée toggle pour masquer tous les div. Et utilisez le this pour n'afficher que le div sélectionné.

JQuery:

$('#select').on("change", function(){
    $(".toggle").css({ "display" : "none"} );
    var val = $(this).val();
    $("#"+val).css({ "display" : "block"} )
});

Violon complet

0
Murad Hasan 8 mars 2016 à 11:25

Essayez ce code Jquery. Ajoutez également la zone de classe à chacun des divs (un, deux)

$(document).ready(function(){
    $("#select").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="one"){
                $(".box").not(".one").hide();
                $(".one").show();
            }
            else if($(this).attr("value")=="two"){
                $(".box").not(".two").hide();
                $(".two").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});
0
Mike Lammers 8 mars 2016 à 11:22

J'ai fait un rapide violon de votre problème .. avec quelques modifications au commentaire de Rayons.

https://jsfiddle.net/s237qaak/

$(document).ready(function() {
  $('#one, #two').hide();
  $('#select').on('change', function() {
    $('#one, #two').hide();
    $('#' + this.value).show()
  });

});
0
JF it 8 mars 2016 à 11:21

La logique est de

  1. Masquez tous les div.
  2. "écouter" les modifications de la sélection à l'aide de .addEventListener('change').
  3. Une fois modifié, obtenez la valeur en utilisant this.value.
  4. Encore une fois, cachez toutes les divs.
  5. Afficher la div sélectionnée.

Vers le code:

document.querySelector('#select').addEventListener('change', function(){
  //[].forEach.call(document.querySelectorAll('.panel'), function(el) {
  //  el.style.display = 'none';
  //});
  document.querySelector('#' + this.value).style.display = 'block';
  console.log(document.querySelector('#' + this.value));
});
.panel {
  display:none;  
}
<select name="subjects" id="select" class="form-control">
  <option value="">Number of Subjects</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

<div class="one panel" id="one">
  <div class="row">
    <div class="col-md-3">
      <label>Code</label>
      <input type="text" name="scode1" class="form-control" placeholder="scode1" />
    </div>

    <div class="col-md-3">
      <label>Name</label>
      <input type="text" name="sname1" class="form-control" />
    </div>
  </div>
</div>

<div class="two panel" id="two">
  <div class="row">
    <div class="col-md-3">
      <label>Code</label>
      <input type="text" name="scode2" class="form-control" placeholder="scode2" />
    </div>

    <div class="col-md-3">
      <label>Name</label>
      <input type="text" name="sname2" class="form-control" />
    </div>
  </div>
</div>
0
Mosh Feu 8 mars 2016 à 11:29