Javascript - onchange dans & lt; option & gt;

J'ai un relativement simple formulaire qui demande une variété de questions. Une de ces questions est répondu par l'intermédiaire d'une Boîte de sélection. Ce que j'aimerais faire, c'est si l'utilisateur sélectionne une option particulière, ils sont invités pour plus d'informations.

Avec l'aide de quelques tutoriels en ligne, j'ai réussi à obtenir le Javascript pour afficher un div caché l'amende juste. Mon problème est que je n'arrive pas à localiser l'événement pour la balise d'Option, seule la balise Select qui ne sert vraiment.

Au moment ressemble le code (code simplifié à l'aide de la clarté!):

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');">
<option value="x">Reason 1</option>
<option value="y">Reason 2</option>
<option value="other">Other Reason</option>
</select>

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

Ce que je voudrais, c'est si ils choisir "Autre Raison" ensuite, il affiche la div. Pas sûr de savoir comment j'ai réaliser cette si onChange ne peut pas être utilisé avec l'Option tag!

Toute aide appréciée 🙂

Remarque: débutant Complet quand il s'agit de Javascript, je m'excuse si c'est bêtement simple à réaliser!

source d'informationauteur suitedupgeek | 2008-12-15

  1. 15

    Installation de la onchange gestionnaire d'événement pour la boîte de sélection de regarder l'index actuellement sélectionné. Si l'indice choisi est celui de l '"Autre Raison" option, puis à l'affichage du message; sinon, cacher la division.

     <html>
 <head>
  <script type="text/javascript">
    window.onload = function() {
        var eSelect = document.getElementById('transfer_reason');
        var optOtherReason = document.getElementById('otherdetail');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 2) {
                optOtherReason.style.display = 'block';
            } else {
                optOtherReason.style.display = 'none';
            }
        }
    }
  </script>
 </head>
 <body>
    <select id="transfer_reason" name="transfer_reason">
        <option value="x">Reason 1</option>
        <option value="y">Reason 2</option>
        <option value="other">Other Reason</option>
    </select>
    <div id="otherdetail" style="display: none;">More Detail Here Please</div>
</body>
</html>

    Personnellement, je prendrais un peu plus loin et déplacer le code JavaScript dans un fichier externe et simplement l'inclure dans l'en-tête de la page; cependant, à toutes fins et intentions, ce qui devrait aider à répondre à votre question.

  2. 8

    Après la lecture de Tom de la grande réponse, j'ai réalisé que si je n'ai jamais ajouté d'autres options pour ma forme elle allait se briser. Dans mon exemple c'est tout à fait probable, parce que les options peuvent être ajoutées ou supprimées à l'aide de php panneau d'admin.

    J'ai fait un peu de lecture et modifié un peu, de sorte que plutôt que d'utiliser selectedIndex il utilise valeur à la place.

    <script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('transfer_reason');
    var optOtherReason = document.getElementById('otherdetail');
    eSelect.onchange = function() {
        if(eSelect.value === "Other") {
            optOtherReason.style.display = 'block';
        } else {
            optOtherReason.style.display = 'none';
        }
     }
  }
  </script>

    Espère que cela aide quelqu'un d'autre dans l'avenir!

  3. 5

    Tom réponse est élégante, et d'une manière ordonnée met la JS loin de le balisage HTML. Comme mentionné, il pourrait même être déplacé vers un fichier externe. Toutefois, il ajoute tout à fait beaucoup de "non-sens" pour le code, comme les multiples anonyme en fonction des affectations etc.

    Si vous voulez solution rapide, vous pouvez tout mettre dans le onchange() à l'intérieur de la balise select. Choisissez celui que vous voyez plus en forme.

    <select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
    <option value="x">Reason 1</option>
    <option value="y">Reason 2</option>
    <option value="other">Other Reason</option>
</select>
<div id="otherdetail" style="display: none;">More Detail Here Please</div>