Sélectionnez "Option" Div Cacher/Montrer en utilisant JQuery

Question

J'essaie de créer une fonction de masquage/affichage automatique lorsque quelqu'un sélectionne une certaine "option" sur un élément sélectionné. Voici ce que j'ai le « sélecteur »:

<li id="foli16" class="name notranslate"> 
        <label class="desc" id="title16" for="Field16"> 
         Repeat Pattern 
         <span id="req_16" class="req"></span> 
        </label> 
        <span class="left"> 
         <select id="Field16" style="margin-left: 0px;" name="" class="field select"> 
          <option value="" <?php echo $doc_selected; ?>>None</option> 
          <option value="" <?php echo $doc_selected; ?>>Daily</option> 
          <option value="" <?php echo $doc_selected; ?>>Weekly</option> 
          <option value="" <?php echo $doc_selected; ?>>Monthly</option> 
          <option value="" <?php echo $doc_selected; ?>>Yearly</option> 
         </select> 
        </span> 
        <p class="instruct" id="instruct16"><small>How often does this test occur?</small></p> 
       </li> 

Quand quelqu'un sélectionne l'option « tous les jours », je veux que le div avec l'id du « quotidien » pour montrer. S'ils en sélectionnent un autre, il doit fermer le visible et montrer la nouvelle sélection.

Je l'ai fait auparavant avec des boutons de clic et une simple bascule, mais je ne sais pas comment écrire cela pour une telle grande bascule, en particulier en utilisant une "option" de sélection. Je suppose que mes options nécessiteront également des identifiants.

Answer 1

Vous avez 5 éléments d'option, si vous avez 5 éléments cibles qui doivent être cachés/montré selon l'option sélectionnée, vous pouvez ajouter une classe à vos éléments cibles et utiliser eq et index méthodes:

var $targets = $('.theTargets'); 

$('#Field16').change(function(){ 
    var i = $('option:selected', this).index(); 
    $targets.hide().eq(i).show(); 
}); 

Dans le cas où vous souhaitez sélectionner l'élément cible par ID:

$(function(){ 
    var $targets = $('.theTargets'); // If they have a common class name 

    $('#Field16').change(function(){ 
     var id = this.value.toLowerCase(); 
     $targets.hide().filter('#' + id).show(); 
    }) 
}) 

Answer 2

Vous pouvez utiliser la fonction de modification pour le champ de sélection et saisir l'ID de l'option sélectionnée.

<script> 
    $(document).ready(function() { 

     //This will fire when an option is selected from <select> 
     $("#Field16").change(function() { 
      //Add a class to all div's so you can hide previous ones 
      $(".whateveryourclassis").hide(); 

      //Get the ID of the selected option 
      var selectedID = $(this).attr("id") + "div"; 

      //Show the right div. (assuming the div you want has the same ID as option 
      //with "div" after it 
      $("#" + selectedID).show(); 
     } 

    } 
</script> 

Answer 3

Vous pouvez faire quelque chose comme ceci:

$('select').on('change', function() { 
    $('li').hide() 
    $('#' + this.value).show(); 
}); 

Answer 4

bâtiment de la réponse de tymeJV,

Je donnerais chacun des divs qui seront cachés/montrés un nom de classe tels que showhide, puis

$("#Field16").change(function() { 
    //Get the ID of the desired div 
    var selectedID = $(this).val(); 

    $(".showhide").hide(); 
    $("#" + selectedID).show(); 
} 

Answer 5

Vous pouvez essayer quelque chose comme ça .

Vous pouvez lier le select à un événement onchange et saisir la valeur comme.

$('#Field16').bind('change',function(){ 
    $('.box').hide(); // All the elements you want to hide on change. 
    $('#'+$(this).val()).show(); 
}); 

http://jsfiddle.net/XKLx8/

Answer 6

Exactement ce que vous voulez:

HTML

<select id="Field16" style="margin-left: 0px;" name="" class="field select"> 
          <option value="">None</option> 
          <option value="">Daily</option> 
          <option value="">Weekly</option> 
          <option value="">Monthly</option> 
          <option value="">Yearly</option> 
         </select> 
<div id="none">I am None</div> 
<div id="daily">I am Daily</div> 
<div id="monthly">I am Monthly</div> 
<div id="weekly">I am Weekly</div> 
<div id="yearly">I am Yearly</div> 

jQuery

jQuery(document).ready(function($){ 
    hide_all(); 
    function hide_all(){ 
    $("#Field16 option").each(function(){ 
     var ids=$(this).text().toLowerCase(); 
     $('#'+ids).hide(); 
    }); 
    } 
    $("#Field16").change(function(){ 
     hide_all(); 
     var val=$('option:selected',this).text().toLowerCase(); 
     $('#'+val).show(); 
    }); 

}); 

voici la démo: http://jsfiddle.net/8wKzQ/