배열의 순수 JS 목록

Question

배열에 넣은 간단한 목록이 있습니다. 목록/배열의 특정 항목이 선택되면이를 수행하고 싶습니다. show content-X.

배열에서 특정 선택을 확인하여 특정 동작을 강제 수행하도록 If 문을 구성하는 방법은 무엇입니까?

<select name="list" id="list"> 
<option name="one" id="one">One</option>  
<option name="two" id="two">two</option> 
<option name="three" id="three">three</option> 
</select> 

var ListArr = []; 
var list = document.getElementById("list"); 

for(i=0; i<list.options.length; i++) 
{ 
ListArr[i]=list.options[i].value; 
} 

Answer 1

이 시도 :

HTML :

<select name="list" id="list"> 
<option name="one" id="one">One</option>  
<option name="two" id="two">two</option> 
<option name="three" id="three">three</option> 
</select> 

JS

(function(){ 
var ListArr = []; 
var list = document.getElementById("list"); 

for(i=0; i<list.options.length; i++) 
{ 
ListArr[i]=list.options[i].value; 
} 

list.addEventListener("change", function(){ 
var x = document.getElementById("list").selectedIndex; 
console.log("specific item in that list/array has been chosen: show content- "+ListArr[x]); 
alert("specific item in that list/array has been chosen: show content- "+ListArr[x]); 
}); 
}()); 

Working jsfiddle link

Answer 2

당신이 (당신의 자신의 기능을 경고 교체) 같은 것을 사용할 수 있습니다 : 당신이 방법을 변경하는 경우

function changeOption() { 
 
    var selected = document.getElementById("list").value; 
 
    alert(selected); 
 
}

<select name="list" id="list" onchange="changeOption()"> 
 
    <option name="one" id="one">One</option> 
 
    <option name="two" id="two">two</option> 
 
    <option name="three" id="three">three</option> 
 
</select>

Answer 3

당신의 선택 메뉴 설정, 당신은 할 수있다 다음과 같이 옵션의 가치에 따라 요소를 쉽게 표시 할 수 있습니다.

HTML

,210

<select name="list" id="list"> 
    <option name="one" value="one">One</option>  
    <option name="two" value="two">two</option> 
    <option name="three" value="three">three</option> 
</select> 

<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div> 

자바 스크립트

document.getElementById("list").onchange=function(){ 
    var hiddenID = this.value; 
    document.getElementById(hiddenID).style.display = "block"; 
}; 

당신은 기본적으로 선택 목록에서 옵션의 value 일치하는 요소에 ID를 제공해야합니다. 여기

는 바이올린입니다 : https://jsfiddle.net/q30gcfg4/