在选择框中查找选择的值

Question

I'm making a quiz application involving a select box. The user selects an option and when they press a button, it should check if the selected option is the correct answer by checking an array of values. I can't figure out how to get the selected value from the select box. I've tried to find information about this, but I only want to use JS, no JQuery. I tried using:

var item = document.getElementById("selections");
var selection = item.options[item.selectedIndex].value;

but I get a Type Error , saying that item.selectedIndex isn't defined. I'm confused because from what I found, selectedIndex is a default property of select tags? I've only worked with radio buttons before, using a for loop and checking every option to see which was checked, but I can't use that here. I don't know if it matters, but I'm doing this without a form tag, just linking a js function to an event listener on a button. Any help would be appreciated. Thanks!

Edit: Here is a fiddle of my code as per request: https://jsfiddle.net/jmf68ycu/

The part where the problem lies is in the submit() function in the first line.

Update: I found something online about the problem having to do with JS trying to call the element before the element is loaded, so I put the variables inside the function, which is only called when the button is pressed. The problem still persists (same error).

Answer 1

You use like this

var item = document.getElementById("selections").value;

you select value store item variable

this code use full for you. :)

Answer 2

You have a syntax error somewhere. your code looks right. you probably aren't getting the right id. your first line probably doesn't return the right select.

 var e = document.getElementById("bla"); var str = e.options[e.selectedIndex].value; alert(str); 

 <select id="bla"> <option value="val1">test1</option> <option value="val2" selected="selected">test2</option> <option value="val3">test3</option> </select>