jQuery dropdown cacher montrer div en fonction de la valeur

c'est une question classique, mais ne peut pas trouver la meilleure approche. J'ai une liste déroulante avec les id project_billing_code_id et 3 valeurs (1, 2, 3).

Si la valeur sélectionnée = 1 alors afficher div avec l'id de l'un et de lui seul. div deux et trois doivent être cachés.
Je tiens également à rendre cela arrive quand la vue est chargé non seulement sur le changement.

$(document).ready(function() {
  $("#hourly").hide();
  $("#per_diem").hide();
  $("#fixed").hide();
$("#project_billing_code_id").change(function() {
  if ($("#project_billing_code_id").val() == '1') {
   $("#hourly").show();
   }
  else if ($("#project_billing_code_id").val() == '2') {
   $("#per_diem").show();
   } 
  else if ($("#project_billing_code_id").val() == '3') {
   $("#fixed").show();
   }
  else { 
       $("#hourly").hide();
       $("#per_diem").hide();
       $("#fixed").hide();
       }
  });
});
Vous avez juste besoin d'ajouter $("#per_diem").hide();$("#fixed").hide() à $("#hourly").show(), de même pour les autres conditions. Donc, les autres restent cachés, quand vous montrez un div.

OriginalL'auteur Gaelle | 2011-08-10

  1. 17

    Proximité. Vous voulez probablement quelques petites modifications dans les comportements assurez-vous que tous les divs cacher et que correct div montre au chargement de la page.

    Avoir un jeu avec le code ici: http://jsfiddle.net/irama/ZFzrA/2/

    Ou de bloquer la mise à jour du code JS ici:

    hideAllDivs = function () {
    $("#hourly, #per_diem, #fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    //Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});

    Laissez-nous savoir comment vous allez!

    Salut @Gaelle pouvez-vous préciser ce que vous voulez dire quand vous dites que la valeur est enregistrée? Pouvez-vous poster un exemple de code complet? (Vous pouvez essayer d'édition jsfiddle.net/irama/ZFzrA/1 - cliquez sur exécuter pour tester votre code, puis cliquez sur mettre à jour lorsque vous avez terminé, ajouter la nouvelle URL à un commentaire ici.)
    Voici ce qui se passe. La valeur enregistrée=2 , ce formulaire est chargé avec per_diem montré. Grand. Si je sélectionne la valeur 3, puis per_diem enlevé, mais ne fixe pas montré. Si la valeur enregistrée=3 formulaire de charges fixes, mais si je sélectionne valeur2 alors fixe enlevé, mais per_diem pas montré. Cependant, si je sélectionne la valeur 1, il fonctionne très bien.
    Merci @Gaelle - Juste pour s'assurer que je suis à vous comprendre: Il semble que la valeur est enregistrée sur le serveur-côté? et puis vous êtes de rechargement/revisiter la page, qui est un succès, mais une fois que vous modifiez la valeur de nouveau, tous les divs sont cachés? Si oui, pourriez-vous poster une copie du HTML qui est affiché lorsque vous rechargez/revoir la page?
    Bonjour encore une fois @Gaelle - il semble que cela pourrait être un problème avec le HTML qui est rendu après l'enregistrement de la page. Avez-vous eu de la chance?
    le problème est venu du code HTML généré. Fixe maintenant. Votre solution fonctionne comme un charme. Merci beaucoup. J'apprécie

    OriginalL'auteur irama

  2. 3

    n'utilisent pas les cacher de document.prêt comme il l'a attendre pour les dom à charger. Ajouter une ligne style="display:none;"

    chute de l' $("#project_billing_code_id") affectations à l'intérieur de votre instruction if et utiliser ce lieu comme vous avez déjà accès à l'élément du dom via le gestionnaire d'événement, d'utiliser $(this).val() ou cette.val(). Également rendre votre code réutilisable de sorte que vous pouvez appeler à partir de différents scripts. 

    var PayRate = (function(){

    var _obj = {};

    var hideShow = function(elem){
        if($(elem).val() === '1'){
              $("#hourly").show();
            }else if($(elem).val() === '2'){
              $("#per_diem").show();    
            }else if($(elem).val() === '3'){
              $("#fixed").show();
            }else{
              $("#hourly, #fixed, #per_diem").hide();
            }
    };

    _obj.checkValue = function(){
        hideShow($('#project_billing_code_id'))
    };

    var events = function(){
        $('#project_billing_code_id').change(function(){
           hideShow(this);
        });
    };

    $(document).ready(function(){
        events ();
        checkValue ();
    });

    return _obj;

}());

    Je n'ai pas testé le au-dessus, alors vous pourriez avoir besoin de faire quelques changements. Je pense que vous avez l'idée. 🙂

    OriginalL'auteur DanyZift

  3. 1

    Travail De Violon

    C'est comment j'ai fait cela a fonctionné pour moi.

    JS

    $(document).ready(function (e) {
    $('#reasonDropDown').change(function () {
        if ($(this).val() == 'other') {
            $('.otherReasonTextBox').show();
        } else {
            $('.otherReasonTextBox').hide();
        }
    });
});

    CSS

     .otherReasonTextBox {
     display:none;
 }

    HTML

    <select id="reasonDropDown" name="Select">
    <option>Select One</option>
    <option>Select Two</option>
    <option>Select Three</option>
    <option value="other" id="other">Other</option>
</select>
<div class="otherReasonTextBox">Other Reason Textbox</div>

    OriginalL'auteur Aamir Shahzad

  4. 0

    Masquer et afficher des balise div à l'aide de jquery

    $(document).ready(function() {

    setOptions(); //on load
    $('#Drodown_id').change(setOptions); //on change
    function setOptions() {       
        switch ($("#Drodown_id").val()) {
            case "option_1" :
                $("#div1").show();
                $('#div2').hide();
                break;
            case "option_2":
                $("#div1").hide();
                $("#div2").show();
                break;
            case "option_3":
                $("#div1").show();
                $("#div2").show();
                break;
            case "":
                $("#div1").hide();
                $("#div2").hide();
                break;
            }
    }); 
});

    OriginalL'auteur Mohit Kotak