Pure JS List in Array

Question

I have a simple list that I put into an array. What I'd like to do is once a specific item in that list/array has been chosen: show content-X.

How do I structure the If statement to check for a specific selection within the array to then force a particular action?

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

Possible duplicate of javascript show hidden div when select option is selected — Dryden Long
– Dryden Long, Commented Aug 15, 2016 at 19:32

Nihar Sarkar · Accepted Answer · 2016-08-15 19:49:20Z

1

Try this:

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

answered Aug 15, 2016 at 19:49

Nihar Sarkar

1,2991 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cameron · Accepted Answer · 2016-08-15 19:24:12Z

0

You could use something like this (just replace the alert with your own functionality):

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>

answered Aug 15, 2016 at 19:24

Cameron

6944 silver badges16 bronze badges

Comments

Dryden Long · Accepted Answer · 2016-08-15 19:44:05Z

0

If you change the way your Select menu is setup, you can easily show an element based on the value of the option like so:

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

You basically need to give an ID to an element that matches the value of the option in the select list.

Here is a fiddle: https://jsfiddle.net/q30gcfg4/

answered Aug 15, 2016 at 19:44

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Pure JS List in Array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related