数组中的纯 JS 列表

Question

我有一个简单的列表，我将它放入一个数组中。一旦选择了该列表/数组中的特定项目，我想做的是：显示内容-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

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

Javascript

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

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

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