代码之家 › 专栏 › 技术社区 › Duke Ngboki

Javascript if else语句以匹配select选项的当前值不起作用。

option drop-down-menu select javascript

-1

Duke Ngboki · 技术社区 · 7 年前

它一直记录所有select的第一个选项(“javascript很棒”)。选项值,而不是当前选定的值

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

2 回复 | 直到 7 年前

1

0

Patrick Evans 7 年前

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

使用 <select> value property 要测试

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

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

<选择(>); 元素的 selectedIndex property 用作选项数组的索引,以获取适当的选项

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

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

<选择(>); 元素的 selectedOptions HTMLCollection property

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

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

2

0

Nina Scholz 7 年前

在你的 if 语句,比较第一个选项的值 1 1. 属于 array . 这总是 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>