Liste déroulante à l'aide de javascript onchange

J'ai une simple liste déroulante et je veux faire en sorte que si l'utilisateur sélectionne Avoir un Bébé le message des changements d'Avoir un Bébé, mais pour n'importe quelle autre sélection. Le message reste le même (rien), mais ce n'est pas de travail. Quelqu'un peut s'il vous plaît aider. Merci de jouer avec mon jsfiddle.

http://jsfiddle.net/Z9YJR/
Voici le code html

<select id="leave">
  <option value="5">Get Married</option>
  <option onchange="changeMessage()" value="100">Have a Baby</option>
  <option value="90">Adopt a Child</option>
  <option value="15">Retire</option>
  <option value="15">Military Leave</option>
  <option value="15">Medical Leave</option>
</select>

<div id="message"></div>

Voici le js

function changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
}
  • Il semble que vous avez à déplacer la fonction de jsfiddle spécifiquement. Je crois que c'est leur manière d'encapsuler le code que vous écrivez, afin de ne pas interférer avec l'un de leur code. jsfiddle.net/Z9YJR/5
  • Ah! Merci Shmiddty 🙂
InformationsquelleAutor John Doe | 2012-08-22
  1. 42

    Quelque chose comme cela devrait faire l'affaire

    <select id="leave" onchange="leaveChange()">
  <option value="5">Get Married</option>
  <option value="100">Have a Baby</option>
  <option value="90">Adopt a Child</option>
  <option value="15">Retire</option>
  <option value="15">Military Leave</option>
  <option value="15">Medical Leave</option>
</select>

<div id="message"></div>

    Javascript

    function leaveChange() {
    if (document.getElementById("leave").value != "100"){
        document.getElementById("message").innerHTML = "Common message";
    }     
    else{
        document.getElementById("message").innerHTML = "Having a Baby!!";
    }        
}

    jsFiddle Démo

    Une version plus courte et plus général pourrait être

    HTML

    <select id="leave" onchange="leaveChange(this)">
  <option value="5">Get Married</option>
  <option value="100">Have a Baby</option>
  <option value="90">Adopt a Child</option>
  <option value="15">Retire</option>
  <option value="15">Military Leave</option>
  <option value="15">Medical Leave</option>
</select>

    Javascript

    function leaveChange(control) {
    var msg = control.value == "100" ? "Having a Baby!!" : "Common message";
    document.getElementById("message").innerHTML = msg;
}
    • Quand je le lance il ne s'affiche rien pour le message..
    • désolé, manqué () sur onchange=leaveChange
    • Vous pouvez passer l'objet à sélectionner la fonction pour une plus grande abstraction... onchange="leaveChange(ce)"... la fonction leaveChange(elem){ if(e.de la valeur...
    InformationsquelleAutor Claudio Redi
  2. 3

    Il ne fonctionne pas parce que votre script dans JSFiddle est en cours d'exécution à l'intérieur de son propre champ d'application (voir le "OnLoad" déroulant sur la gauche?).

    Un moyen de contourner cela est de lier votre gestionnaire d'événements en javascript (où il devrait être):

    document.getElementById('optionID').onchange = function () {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

    Une autre façon est de modifier votre code pour le violon, de l'environnement et de déclarer explicitement votre fonction en tant que global, il peut être trouvé par votre inline gestionnaire d'événement:

    window.changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

    InformationsquelleAutor jbabey
  3. 3

    facile

    <script>
jQuery.noConflict()(document).ready(function() {
    $('#hide').css('display','none');
    $('#plano').change(function(){

        if(document.getElementById('plano').value == 1){
            $('#hide').show('slow');    

        }else 
            if(document.getElementById('plano').value == 0){

             $('#hide').hide('slow'); 
        }else
            if(document.getElementById('plano').value == 0){
             $('#hide').css('display','none');  

            }

    });
    $('#plano').change();
});
</script>

    cet exemple affiche et masque la div s'il est sélectionné dans la combobox une valeur précise

    • Parce qu'évidemment tout le monde qui a un javascript problème, utilise ou souhaite utiliser jQuery!
    InformationsquelleAutor offboard