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

<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";
};

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

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

数组中的纯JS列表

3 个答案: