jQuery: masquer et afficher un élément d'entrée

Je suis en train de faire est de cacher/montrer un certain objet d'entrée si un sélectionnez la valeur est vérifiée.

Code JSFiddle

La partie HTML du code est ici:

<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
    Price:
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
 </div>​

Et le jQuery partie est ici:

$(document).ready(function()
{
    $("#add_fields_placeholder").change(function() {
        if($(this).val() == "Other") {
            $("#add_fields_placeholderValue").show();
        }
        else {
            $("#add_fields_placeholderValue").hide();
        }
    });
});

Donc, si l'utilisateur choisit "Autre", il montre un autre objet entrée.

Le problème est désormais de cette. En premier lorsque vous ouvrez la page, la première option est sélectionnée par défaut et l'option de saisie de l'objet est affiché. Il masque une fois que vous sélectionnez une autre option.

Est-il un truc pour faire le cacher lors du premier chargement de la page? Pas seulement quand vous sélectionnez une valeur manuellement.

Merci les gars.

OriginalL'auteur inrob | 2012-08-11

  1. 13

    Juste ajouter:

    $("#add_fields_placeholderValue").hide();

    Après votre événement de changement de la déclaration de chargement de page.

    c'est à dire

    $(document).ready(function()
{
 $("#add_fields_placeholder").change(function()
 {
  if($(this).val() == "Other")
  {
   $("#add_fields_placeholderValue").show();
  }
  else
  {
   $("#add_fields_placeholderValue").hide();
  }
 });
 $("#add_fields_placeholderValue").hide();
});

    De travail exemple: http://jsfiddle.net/bZXYR/

    Merci beaucoup pal 🙂 Cela fonctionne très bien.
    nice 😀

    OriginalL'auteur Travis J

  2. 2

    Vous pouvez utiliser css pour cacher initialement

    #add_fields_placeholderValue{display:none;}

    http://jsfiddle.net/FarVX/20/

    Aussi, vous avez plusieurs éléments avec le même id(souligné par Brandon), ce qui n'est pas valide

    Si vous faites cela, sans résoudre le conflit Id de la zone de saisie ne s'affichera jamais. À moins qu'il n'est pas pour moi sur chrome.
    merci, mis à jour

    OriginalL'auteur Musa

  3. 1

    J'ai généralement le facteur le cacher/montrer la logique:

    function foobar(){
    if($(this).val() == "Other"){
        $("#add_fields_placeholderValue").show();
    }
    else{
        $("#add_fields_placeholderValue").hide();
    }
}

    et de l'appeler quand le chargement de la page.

    $(document).ready(function(){
    foobar();
    $("#add_fields_placeholder").change(function(){
        foobar();
    });
});

    mais je serais curieux de voir ce que les autres gens font habituellement.

    Merci pour ton code 🙂
    bien sûr, j'espère que ça aide. semblable à d'autres réponses, c'est très pratique lorsque vous rechargez la page, avec un pré-rempli le formulaire.

    OriginalL'auteur Tuanderful

  4. 1

    Vous pouvez simplement le faire avec du CSS:

    Modifier le code ici:

    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">

    puisque vous avez déjà utiliser ici

    <div id="add_fields_placeholderValue">

    puis ajouter ce css:

    #add_fields_placeholderValue {
  display: none;       
}​
    Merci. Je ne pense pas que ce serait vraiment la meilleure option pour ce cas. Mais vous m'avez donné une option supplémentaire sur les autres cas 😉 Merci.
    Je suis d'accord si, pour quelque raison que javascript n'est pas activé la div ne serait jamais montré. Vous pouvez toujours régler l'ID partagé.

    OriginalL'auteur Brandon

  5. 1

    si vous modifiez la méthode anonyme en fonction appelable, vous devriez être en mesure d'appeler Prêt()

    par exemple

    $(document).ready(function () {
    $("#add_fields_placeholder").change(ShowIfOther);
    ShowIfOther();
});

function ShowIfOther() {
    if ($("#add_fields_placeholder").val() == "Other") {
        $("#add_fields_placeholderValue").show();
    } else {
        $("#add_fields_placeholderValue").hide();
    }
}​

    OriginalL'auteur Craig Payne

  6. 1

    Placez le code suivant sous l'espace réservé éléments:

    <script>$('#add_fields_placeholderValue').hide();</script>

    De le faire dans le prêt gestionnaire peut induire de la "brillance" de l'élément dans certaines circonstances:

    Clin lors de l'appel hide() sur le document prêt

    OriginalL'auteur Dave R.