selected option using javascript

Selected Option using JavaScript

Have you ever wanted to know which option a user has selected in a drop-down list using JavaScript? Well, you're in luck because it's actually quite easy to do.

First, let's set up our HTML. We'll create a select element with a few options:

  <select id="mySelect">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>

Next, we'll create a button that will trigger the JavaScript function:

<button onclick="getSelectedOption()">Get Selected Option</button>

Now, let's write the JavaScript function:

  function getSelectedOption() {
    let select = document.getElementById("mySelect");
    let selectedOption = select.options[select.selectedIndex].value;

Let's break this down:

Step 1: Get the select element

We first need to get the select element using its ID. We do this using the document.getElementById() method:

let select = document.getElementById("mySelect");

Step 2: Get the selected option

Next, we need to get the selected option. We do this by accessing the options property of the select element and getting the selectedIndex:

let selectedOption = select.options[select.selectedIndex].value;

This will give us the value of the selected option. If you want to get the text of the selected option instead, you can use select.options[select.selectedIndex].text.

Step 3: Do something with the selected option

Finally, we can do something with the selected option. In this example, we're just logging it to the console:


And that's it! You now know how to get the selected option in a drop-down list using JavaScript.

There are other ways to accomplish this as well. One way is to add an event listener to the select element that triggers a function when the selection changes:

select.addEventListener("change", function() {
  let selectedOption = select.options[select.selectedIndex].value;

This will trigger the function every time the selection changes.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]