How to save select dropdown menu option in HTML/pure JS?

Question

Let's say I have this code:

<select id = dropdown-list>
    <option value = "0"> Yes </option>
    <option value = "1"> No </option>
</select>

The user can select yes or no from a dropdown list. How can I use pure JS/HTML to figure out what the user has selected (and is currently showing in the dropdown list box when the list isn't expanded) so I can use that data elsewhere? The only way I can figure out is if I add an eventListener on each option but I feel there is a better way. I am quite new to JS so I'm not sure. Thank you.

Maverick Fabroa · Accepted Answer · 2021-02-23 06:08:17Z

1

You can use onchange attribute from select element.

<select id="dropdown-list" onchange="onChange(this.value)">
    <option value = "0"> Yes </option>
    <option value = "1"> No </option>
</select>

and in JS:

function onChange(val) {
  // `val` is the value
}

answered Feb 23, 2021 at 6:08

Maverick Fabroa

1,1831 gold badge10 silver badges17 bronze badges

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

Comments

Kawser Habib · Accepted Answer · 2021-02-23 06:47:28Z

Execute a JavaScript function changeResult when a user changes the selected option of a element:

Flow:

We bind changeRegult using onchange event listener.
When we change the dropdown menu, it calls changeResult function.
Inside the function, we select our dropdown menu using its id property.
After getting the element by id, we can now access all properties.
Here we want to show the value property, so we use document.getElementById("dropdown-list").value.

For more check this link.

function changeResult() {
  var x = document.getElementById("dropdown-list").value;
  document.getElementById("result").innerHTML = "You selected: " + x;
}

<select id = "dropdown-list" onchange="changeResult()">
    <option value = "0"> Yes </option>
    <option value = "1"> No </option>
</select>
<p id="result"></p>

Anonymous · Accepted Answer · 2021-02-23 06:11:39Z

0

You may want to use on change event. Since you use each I suppose you are using Jquery. If you have any question just let me know.

$(document).ready(function(){
    $('#dropdown-list').on('change',function(){
    alert($(this).children('option:selected').val());
  })
});

https://jsfiddle.net/u4dz162o/

answered Feb 23, 2021 at 6:11

Anonymous

4,63110 gold badges66 silver badges99 bronze badges

2 Comments

protommxx Over a year ago

This is for a class assignment where most of the assignment we are essentially learning ourselves, but we're not allowed to use Jquery, react, unfortunately.

Anonymous Over a year ago

Yeah can be easily done in JS too, can't quite remember the steps though.

Collectives™ on Stack Overflow

How to save select dropdown menu option in HTML/pure JS?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related