Javascript if if語句與當前選擇選項的值不匹配。

Question

Javascript if if語句匹配選擇選項的當前值不工作假設，我在這裏錯過了什麼。 它保持記錄的第一個選項（「JavaScript是偉大的」）的所有select.options值，而不是目前的一個選擇

//select target element 
 
var allQtyOptions = document.getElementsByTagName("select"); 
 

 
var myOptions = allQtyOptions[0].options; 
 

 
//create array 
 
var myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
 

 

 
/*comparing index of array to select.options index value with parse*/ 
 

 
function myInputCalc() { 
 

 
\t if (myArray.indexOf(1) === parseInt(myOptions[1].value)) { 
 
\t \t console.log("javascript is great"); \t \t 
 
\t } 
 
\t else if (myArray.indexOf(2) === parseInt(myOptions[2].value)) { 
 
\t \t console.log("I LOVE JAVASCRIPT"); 
 
\t \t \t } 
 
\t else if (myArray.indexOf(3) === parseInt(myOptions[3].value) { 
 
\t \t console.log("awesome"); 
 
\t \t \t } 
 
\t else if (myArray.indexOf(4) === parseInt(myOptions[4].value)) { 
 
\t \t console.log("great"); 
 
\t \t \t } 
 
    else if (myArray.indexOf(5) === parseInt(myOptions[5].value)) { 
 
\t \t console.log("try again"); 
 
\t \t \t } 
 
    else if (myArray.indexOf(6) === parseInt(myOptions[6].value)) { 
 
\t \t console.log("yi pee"); 
 
\t \t \t } 
 
    else if (myArray.indexOf(7) === parseInt(myOptions[7].value)) { 
 
\t \t console.log("its very simple"); 
 
\t \t \t } 
 
\t else if (myArray.indexOf(8) === parseInt(myOptions[8].value)) { 
 
\t \t console.log("nice one"); 
 
\t \t \t } 
 
\t else if (myArray.indexOf(9) === parseInt(myOptions[9].value)) { 
 
\t \t console.log("keep at it"); 
 
\t \t \t } 
 
    else if (myArray.indexOf(10) === parseInt(myOptions[10].value)) { 
 
\t \t console.log("you will succeed"); 
 
\t \t \t }; 
 
    }

       <div> 
 
           <select class="select-option" onchange="myInputCalc()" > 
 
\t \t \t \t \t \t \t \t \t <option value="0">0</option> 
 
            <option value="1">1</option> 
 
            <option value="2">2</option> 
 
            <option value="3">3</option> 
 
            <option value="4">4</option> 
 
            <option value="5">5</option> 
 
            <option value="6">6</option> 
 
            <option value="7">7</option> 
 
            <option value="8">8</option> 
 
            <option value="9">9</option> 
 
            <option value="10">10</option> 
 
           </select> 
 
          </div>

Answer 1

因爲你不檢查當前選擇的值，你只是測試對每個選項的值都是一樣的。

使用<select>元素的value property測試

var selectElement = document.getElementsByTagName("select")[0]; 

if(parseInt(selectElement.value,10) === myArray.indexOf(1)){ 
    //... 
} 

的<select>元素的selectedIndex property作爲索引使用到的選項陣列以獲得相應的選項

var selectElement = document.getElementsByTagName("select")[0]; 
var selectedValue = myOptions[selectElement.selectedIndex].value; 

if (myArray.indexOf(1) === parseInt(selectedValue,10)) { 
    //.. 
} 

甚至使用<select>元素的selectedOptions HTMLCollection property （在IE中不支持，但在Edge中支持）

var selectElement = document.getElementsByTagName("select")[0]; 
var selectedValue = selectElement.selectedOptions[0].value; 

if (myArray.indexOf(1) === parseInt(selectedValue,10)) { 
    //.. 
} 

Answer 2

在你if聲明中，你比較的價值第一個選項1與指數1的值爲array。這總是true，因爲接下來的條件是一直true，作爲下一個。但是你有一個持續的條件結構，如果第一個條件是true，那麼下一個永遠不會被評估。

基本上，你可以檢查選定的索引和測試數組的索引。

但是，您可以只使用select標籤的選定索引，並將其用作自定義數組的索引。

var allQtyOptions = document.getElementsByTagName("select"); 
 
var myOptions = allQtyOptions[0].options; 
 

 
function myInputCalc() { 
 
    var msg = ["javascript is great", "I LOVE JAVASCRIPT", "awesome", "great", "try again", "yi pee", "its very simple", "nice one", "keep at it", "you will succeed"]; 
 
    myOptions.selectedIndex && console.log(msg[myOptions.selectedIndex - 1]); 
 
}

<div> 
 
    <select class="select-option" onchange="myInputCalc()"> 
 
     <option value="0">0</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     <option value="9">9</option> 
 
     <option value="10">10</option> 
 
    </select> 
 
</div>