liste déroulante de l'événement onchange pas de tir jusqu'à la seconde instance

Je vais avoir le plus étrange problème, même si je suis sûr que c'est quelque chose de simple - je suis perplexe. J'ai un événement qui cache et montre vrd basé sur un menu déroulant. Lorsque je touche quelque chose de mon menu, il ne fait absolument rien. Cependant, si je l'ai changer pour une deuxième sélection, il fonctionne parfaitement. Quelqu'un sait ce que j'ai foiré? Merci pour tout et à toute l'assistance.

function call1()
{
document.getElementById("quest1").onchange = function () {
alert("ON CHANGE FIRED");
var val = this.options[this.selectedIndex].value;
document.getElementById("area1z").style.display = (val == "0") ? "block" : "none";
document.getElementById("area1a").style.display = (val == "1") ? "block" : "none";
document.getElementById("area1b").style.display = (val == "2") ? "block" : "none";
document.getElementById("area1c").style.display = (val == "3") ? "block" : "none";
document.getElementById("area1d").style.display = (val == "4") ? "block" : "none";
};
}
<select id="quest1" onChange="call1()">
<option value=0></option>
<option value=1>Stretch (Maintaining a lifestyle choice for an amount of time)            </option>
<option value=2>Sum (i.e. saving money, counting workouts, etc.</option>
<option value=3>Loss (i.e. Weightloss)</option>
<option value=4>None</option>
</select>
<div id=area1z style="display:none">Please Choose a Quest</div>
<div id=area1a style="display:none">Stretch</div>
<div id=area1b style="display:none">Sum</div>
<div id=area1c style="display:none">Loss</div>
<div id=area1d style="display:none">None</div>

OriginalL'auteur jkeefe56 | 2013-10-21

  1. 4

    Supprimer onChange() une des options suivantes:

    <select id="quest1" onChange="call1()">

    Écrire de cette façon:

    document.getElementById("quest1").onchange = function () {
alert("ON CHANGE FIRED");
var val = this.options[this.selectedIndex].value;
document.getElementById("area1z").style.display = (val == "0") ? "block" : "none";
document.getElementById("area1a").style.display = (val == "1") ? "block" : "none";
document.getElementById("area1b").style.display = (val == "2") ? "block" : "none";
document.getElementById("area1c").style.display = (val == "3") ? "block" : "none";
document.getElementById("area1d").style.display = (val == "4") ? "block" : "none";
};

    Exemple

    Hm, il fonctionne parfaitement dans JSFiddle, mais pas du tout dans ma page. Étrange...
    Merci Dhaval! Pour ceux qui ont un problème similaire, la raison pour laquelle je ne pouvais pas le faire fonctionner parce que le js est dans la tête pas le corps....facepalm.
    Bienvenue Pal.. 🙂 Content que ça a aidé!

    OriginalL'auteur Dhaval Marthak

  2. 0
                  <script>
function call1()
{
alert("ON CHANGE FIRED");
var val=document.getElementById("quest1").value;
alert(val);
document.getElementById("area1z").style.display = (val == "0") ? "block" : "none";
document.getElementById("area1a").style.display = (val == "1") ? "block" : "none";
document.getElementById("area1b").style.display = (val == "2") ? "block" : "none";
document.getElementById("area1c").style.display = (val == "3") ? "block" : "none";
document.getElementById("area1d").style.display = (val == "4") ? "block" : "none";
}
</script>
<select id="quest1" onChange="call1()">
<option value="0"></option>
<option value="1">Stretch (Maintaining a lifestyle choice for an amount of time)            </option>
<option value="2">Sum (i.e. saving money, counting workouts, etc.</option>
<option value="3">Loss (i.e. Weightloss)</option>
<option value="4">None</option>
</select>
<div id="area1z" style="display:none">Please Choose a Quest</div>
<div id="area1a" style="display:none">Stretch</div>
<div id="area1b" style="display:none">Sum</div>
<div id="area1c" style="display:none">Loss</div>
<div id="area1d" style="display:none">None</div>
    Belle. Merci!!!! Il ne me laisse pas le marquer comme réponse parce que c'est trop tôt, mais je le ferai dans quelques minutes! Merci pour votre aide! (EDIT) a parlé trop tôt. L'alerte est en place maintenant, mais les divs ne montrent jamais.
    modifié la réponse..s'il vous plaît vérifier...

    OriginalL'auteur shemy

  3. 0

    Voici une Démo de ce que vous essayez de faire.

    Soit vous supprimez le "onchaange" ou le "document.getElementById("quest1").onchange = function () {}" dans le code.

    document.getElementById("quest1").onchange = function () {
alert("ON CHANGE FIRED");
var val = this.options[this.selectedIndex].value;
document.getElementById("area1z").style.display = (val == "0") ? "block" : "none";
document.getElementById("area1a").style.display = (val == "1") ? "block" : "none";
document.getElementById("area1b").style.display = (val == "2") ? "block" : "none";
document.getElementById("area1c").style.display = (val == "3") ? "block" : "none";
document.getElementById("area1d").style.display = (val == "4") ? "block" : "none";
};

    jsfiddle lien: http://jsfiddle.net/2M74g/1/

    OriginalL'auteur varun