数组中的纯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]);
});
}());

工作jsfiddle链接

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

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

Java脚本

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

基本上，您需要为与选择列表中选项value匹配的元素提供ID 。

这是一个小提琴： https : //jsfiddle.net/q30gcfg4/