Get selected value and text from a select menu using JavaScript
Updated: 10-Apr-2024 / Tags: Javascript Lang Reference / Views: 140 - Author: George
Introduction
Hi guys.
In this tutorial I am going to show you how to access the selected option value and text from a
drop down select menu.
In a real world application we accessing those informations for various reasons, maybe to do a search, or to store them in the local storage, or a php session, so we can use them in another script in another page. It's really something that you need to know.
Quick Answer
-
The Select Element
We are gonna use the following select element to get the value and the text of a selected option.
<select name="cars" id="cars"> <option value="audi">AUDI</option> <option value="mercedes">MERCEDES</option> <option value="ford">FORD</option> <option value="alfa romeo">ALFA ROMEO</option> </select>
-
Get The Selected Value
To get the selected option's value we target and store first the select element in a variable named cars. Then we use the cars variable to access the options, the selectedIndex property, and finally the selected value.
let cars = document.querySelector("#cars"); let value = cars[cars.options.selectedIndex].value;
-
Get The Selected Text
To get the selected option's value we target and store first the select element in a variable named cars. Then we use the cars variable to access the options, the selectedIndex property, and finally the selected text.
let cars = document.querySelector("#cars"); let text = cars[cars.options.selectedIndex].text;
If the quick answer is covering what you need, that's great. But if you want to learn how to recreate the Live Demo below, keep reading. Either way, happy coding.
Live Demo
I prepared this small application where we display the selected value and text in the screen. Use the drop-down list to select an option and then use the buttons to get the value and the selected text.
Now let's recreate the above Live Example.
The HTML code
Let's write first the html code for our application.
<p class="out-value">
The selected option value is: <span></span>
</p>
<p class="out-text">
The selected option text is: <span></span>
</p>
<form action="" method="post">
<select name="cars" id="cars">
<option value="audi">AUDI</option>
<option value="mercedes">MERCEDES</option>
<option value="ford">FORD</option>
<option value="alfa romeo">ALFA ROMEO</option>
</select>
</form>
<button id="get-value">Get the value</button>
<button id="get-text">Get the text</button>
Code breakdown
Let's analyze the html code.
- In line 1 we have a p tag which acts as a placeholder and will be populated with the selected option's value.
- In line 4 we have again a p tag and will be populated with the selected option's text.
-
Next in line 8 we have our form. The action and method attributes are optional
in this example because we are not submitting the data anywhere.
<form action="" method="post">
-
Next in line 9 we have our select menu, which has a name of "cars", and an id of "cars". We are going to use
the id attribute to target the select menu from the javascript code.
Now inside the select menu we have the option tags and we have cars as values and text. Notice that the values have the same car name but written in lowercase<select name="cars" id="cars"> <option value="audi">AUDI</option> <option value="mercedes">MERCEDES</option> <option value="ford">FORD</option> <option value="alfa romeo">ALFA ROMEO</option> </select>
-
In line 17 we have the "get-value" button. As you guessed when we click on it we will get the selected option value.
And in line 18 we have the "get-text" button.<button id="get-value">Get the value</button> <button id="get-text">Get the text</button>
- That is all the html code we need, now let's write the javascript code.
The javascript code
We start our javascript code by setting some global variables that we will use in our functions.
// Setting the global variables
let cars = document.querySelector("#cars"); // The select menu.
let valueButton = document.querySelector("#get-value"); // The get value button.
let textButton = document.querySelector("#get-text"); // The get text button.
let outValue = document.querySelector(".out-value span"); // The value placeholder.
let outText = document.querySelector(".out-text span"); // The text placeholder.
cars.addEventListener("change", clearContent);
function clearContent(){
outValue.innerHTML = "";
outText.innerHTML = "";
}
valueButton.addEventListener("click", getValue);
function getValue(){
let index = cars.options.selectedIndex;
outValue.innerHTML = cars[index].value;
}
textButton.addEventListener("click", getText);
function getText(){
let index = cars.options.selectedIndex;
outText.innerHTML = cars[index].text;
}
Code breakdown
Let's analyze our javascript code.
-
In line 8 we assign an onchange event-listener to the select menu.
Every time we choose an option the clearContent function will run.
In line 9 we declaring the clearContent function. Now what the function will do, is to clear any previous selected values from the placeholders.cars.addEventListener("change", clearContent); function clearContent(){ outValue.innerHTML = ""; outText.innerHTML = ""; }
-
In the next code-block in line 14 we will grab the selected value. We are going to assign the onclick event-listener to
the get-value button, and run a function named getValue.
In line 15 we declaring the getValue() function.valueButton.addEventListener("click", getValue); function getValue(){ let index = cars.options.selectedIndex; outValue.innerHTML = cars[index].value; }
Now let me explain what happens in line 16. The cars variable gives us access to the select menu and its options.
Then we chain the .options property to fetch the option tags from the select menu like this: cars.options.
Now that we have access to the options we can use the .selectedIndex property to get the selected index, as the name implies. As you can see in the image above we have the selectedIndex property in the last line, and it says 1. Lets see this.
Now we can use the selectedIndex as a key [index], to get the value in line 17, and display it in the screen.outValue.innerHTML = cars[index].value;
Or we can do this in one line.outValue.innerHTML = cars[cars.options.selectedIndex].value;
And the selected value is "mercedes". For me that is the proper way to access the value from a selected option tag.
-
But we can do also this which is much simpler.
valueButton.addEventListener("click", getValue); function getValue(){ outValue.innerHTML = cars.value; }
-
In line 20 we have the code-block to fetch the selected option text. There is not much to explain here,
everything that we know from the getValue section applies here to. Except that we are targeting the text in line 23, cars[index].text.
And we can NOT do something like this, cars.text.
textButton.addEventListener("click", getText); function getText(){ let index = cars.options.selectedIndex; outText.innerHTML = cars[index].text; }
Summary
And that's all, we reached the end of this article.
We saw how to get the selected value and text from a select menu.
I hope i explained it in a way that is understandable.
Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any errors, so i can update the page with the correct code.