Javascript if else 语句匹配 select 选项的当前值无效。

Question

Javascript if else 语句匹配 select 选项的当前值未按预期工作，我在这里缺少什么。它一直记录所有 select.options 值的第一个选项 ("javascript is great")，而不是当前的 selected

//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() {

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

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

Answer 1

在您的 if 语句中，您将第一个选项 1 的值与 array 的 1 的索引值进行比较。这始终是 true，因为下一个条件也始终是 true，作为下一个条件。但是你有一个连续的条件结构，如果第一个条件是 true，则永远不会评估下一个条件。

基本上你可以检查 selected 索引并测试数组的索引。

但您可以仅使用 select 标记的 selected 索引并将其用作自定义数组的索引。

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>

Answer 2

因为您没有检查当前选择的值，所以您只是针对始终相同的每个选项值进行测试。

使用<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)) {
   //..
}

Javascript if else 语句匹配 select 选项的当前值无效。

Javascript if else statement to match current value of the select option not working.

javascript

select

option

drop-down-menu