web-dev-qa-db-fra.com

Dropdown en utilisant javascript onchange

J'ai un menu déroulant simple et je veux l'avoir de sorte que si l'utilisateur sélectionne Avoir un bébé, le message devient "Avoir un bébé", mais pour toute autre sélection. Le message reste le même (rien), mais cela ne fonctionne pas. Puis-je avoir une aide s'il vous plait. S'il vous plaît 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!!";
}
javascriptonchange
22
John Doe

Quelque chose comme ça 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!!";
    }        
}

démo jsFiddle

Une version plus courte et plus générale 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;
}
42
Claudio Redi

Cela ne fonctionne pas car votre script dans JSFiddle est exécuté dans sa propre portée (voir la liste déroulante "OnLoad" à gauche?).

Une solution consiste à lier votre gestionnaire d’événements en javascript (où il devrait se trouver):

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

Une autre méthode consiste à modifier votre code pour l'environnement de violon et à déclarer explicitement votre fonction comme globale afin qu'elle puisse être trouvée par votre gestionnaire d'événements en ligne:

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

Un séjour sans faille

3
jbabey

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 montre et cache le div si sélectionné dans la liste déroulante une valeur spécifique

3
offboard