dropdown onchange事件直到二次發生時才發射

我遇到了最奇怪的問題，雖然我確定它很簡單 - 我很難過。我有一個基於下拉菜單隱藏和顯示div的事件。當我從我的菜單中選擇一些東西時，它什麼都沒有。但是，如果我將其更改爲第二個選擇，則它可以很好地工作。任何人都知道我搞砸了什麼？感謝您的幫助。以這種方式dropdown onchange事件直到二次發生時才發射

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

寫：

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>

來源

2013-10-21 jkeefe56

從下面取出onChange()

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"; 
};

Example

來源

2013-10-21 08:46:42

嗯，它在JSFiddle中完美工作，但在我的頁面中完全沒有。奇怪... – jkeefe56

謝謝你Dhaval！對於任何有類似問題的人來說，我無法工作的原因是因爲js在頭部而不是身體.... facepalm。 – jkeefe56

歡迎Pal .. :)很高興它幫助！ –

   <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>

來源

2013-10-21 08:46:02 shemy

美麗。謝謝！它不會讓我把它標記爲已回答，因爲它太快了，但我會在幾分鐘內！感謝您的幫助！（EDIT）說得太快了。警報現在出現了，但是div並沒有顯示出來。 – jkeefe56

編輯答案..請檢查它...... – shemy

這裏是你正在嘗試做一個演示。

從代碼中刪除「onchaange」或「document.getElementById（」quest1「）。onchange = function（）{}」。

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鏈接：http://jsfiddle.net/2M74g/1/

來源

2013-10-21 10:09:37 varun

dropdown onchange事件直到二次發生時才發射

回答

相關問題