Html select get value and text

Last updated: Jan 12, 2023
Reading time · 3 min

banner

To get the value and text of a select element on change:

Add a change event listener to the select element.
Use the value property to get the value of the element, e.g. select.value .
Use the text property to get the text of the element, e.g. select.options[select.selectedIndex].text .

Here is the HTML for the examples.

Copied!
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> select id="select" style="font-size: 3rem"> option value="">--Choose an option--option> option value="horse">Horse 🐴option> option value="wolf">Wolf 🐺option> option value="fox">Fox 🦊option> select> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event)  console.log(event.target.value); // 👉️ get selected VALUE // 👇️ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // 👇️ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); >);

We added a change event listener to the select element.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In the example, the event.target property points to the select element, because that is the element on which the event was dispatched.

# Read or set the value of a select element

The value property allows us to read or set the value of the select element.

Copied!
const select = document.getElementById('select'); // ✅ Read value console.log(select.value); // 👉️ "" // ✅ Set value select.value = 'fox'; console.log(select.value); // 👉️ "fox"

When setting the value of a select element, make sure to set it to one of the values of the option elements.

The options property on the select element returns an array-like object that contains all of the options of the select element.

Copied!
const select = document.getElementById('select'); console.log(select.options); // 👉️ [option, option, option, option] select.addEventListener('change', function handleChange(event)  console.log(select.options); // 👉️ [option, option, option, option] >);

# Get the index of the currently selected option element

We can use the selectedIndex property to get the index of the currently selected option .

Copied!
const select = document.getElementById('select'); console.log(select.selectedIndex); select.addEventListener('change', function handleChange(event)  console.log(select.selectedIndex); >);

Initially it is set to 0 , but if you console.log the selectedIndex in the handleChange function and change the selected element, you will see the index change.

# Get the text and value of the selected option using the index

The selectedIndex property can be used to get the index of the currently selected option element. The index can be used to get the element’s value and text .

Copied!
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event)  // 👇️ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // 👇️ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); >);

This approach can be used both inside and outside of an event handler function.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Html html select option value and text

Property Values: It contains single value text which defines the text content of an element. Output: Before Selecting an Option: After Selecting an Option” Supported Browsers: The browser supported by DOM Option text Property are listed below: Google Chrome Internet Explorer Firefox Opera Safari

Html SELECT : send both value and text on submit

Posting the form will only send the «value» of the option to your backend, so if you also need the text, you could combine them in value like

and then split the value by the separator in your backend.

I think you should give this a try:

$("#btnSub").on('click',function()< // Submit button click $(".select option:selected").each(function(i, option)< console.log($(this).val() + "," + $(this).text()); >); return false; >);

Fiddle Demo

You could build your request data yourself with jquery. Something like : (Not tested, might need a few corrections but here’s the idea)

//POST request $("#form").submit(function()< var countryVal = $("[name=country]").val(); var countryLbl = $("[name=country]").find("option:selected").text(); $.ajax(< data:, url: yourUrl, method:'post' >); return false; >); // GET request $("#form").submit(function()< var countryVal = $("[name=country]").val(); var countryLbl = $("[name=country]").find("option:selected").text(); $.ajax(< url: 'yourUrl?countryVal='+countryVal+'&countryLbl='+countryLbl' >); return false; >);

This work if you’re ok with ajax request. If you’re not, set hidden input in your form and set the value before submit :

Get selected value in dropdown list using JavaScript, 32 Answers 32 ; var e = document.getElementById ; «#elementId :selected»).text(); // The text content of the selected option ; // HTML

Javascript HTML element get selected select option text

html 5 and javascript tutorial on get selected text from the select option element dropdownlist
Duration: 5:06

HTML select POSTing text instead of value for <option> selected

I know its probably Jquery that confused you since they use .val a lot but actual HTML uses value and so does normal Javascript use .value .

I think since you didn’t properly specify a value your browser must be putting the text in value for you somehow. Don’t rely on that, however, since I think that’s probably a bug and not all browsers will do it.

Pass the text from a form Select-Option to a text input field, It’s not as easy as getting the selected option’s value, which can be retrieved simply as selectElement.value , yet it’s not difficult at

HTML | DOM Option text Property

The Option text property in HTML DOM is used to set or return the text of an element. The text value sent to the server when user submitted the form.

Property Values: It contains single value text which defines the text content of an element.

Return Value: It returns a string value which represent the text content of the option element.

Example 1: This Example illustrate how to set the Option text Property.

Output:
before Click on the Button:

After Click on the Button:

Example 2: This Example illustrate how to return the Option text Property.

Output:
Before Selecting an Option:

After Selecting an Option”

Supported Browsers: The browser supported by DOM Option text Property are listed below:

HTML select — display value attribute in HTML but retain option text, Pretty sure that can’t be done with HTML and CSS alone. · What’s point of doing this? · @Vohuman, actually, using jQuery’s focus and blur will

Источник

JavaScript: How to Get the Value of a Select or Dropdown List

Getting the value of a select in HTML is a fairly recurring question. Learn how to return the value and text of a dropdown list using pure JavaScript or jQuery.

Let’s assume you have the following code:

English

How to get the value of a select

To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property.

The value «en» will be printed on the console (Ctrl + Shift + J to open the console).

Getting the value of a select with jQuery

How to get the text of a select

To get the content of an option, but not the value, the code is almost the same, just take the text property instead of value.

The text «English» will be printed on the console (Ctrl + Shift + J to open the console).

Getting the text from a select with jQuery

Complete example

In the code below, when we change the dropdown value, the select value and text are shown in an input field.

     function update() < var select = document.getElementById('language'); var option = select.options[select.selectedIndex]; document.getElementById('value').value = option.value; document.getElementById('text').value = option.text; >update();

Источник

Manipulation of HTML Select Element with Javascript

Manipulation of the element with Javascript is quite commonly required in web applications. This tutorial explains how you can perform common operations on select element with vanilla Javascript — adding/deleting options or getting/setting the selected options.

Important Properties and Methods of Select Element

value : It gives the value of the first selected option (a multi-valued select may have multiple selected options)
options : It gives the list of all option elements in the select
selectedOptions : It gives the list of option elements that are currently selected
selectedIndex : It is an integer that gives the index of first selected option. In case no option is selected, it gives -1
add() : This method adds a new option to the list of options
remove() : This method removes an option from the select element

Important Properties of Option Element

value : It gives the value of the option
text : It gives the text inside the option
selected : It tells whether the option is selected or not

Setting Value of Select Element

For a single valued select, setting its value can be done with the value or the selectedIndex property.

// Set option with value 'Orange' as selected document.querySelector('#choose-fruit').value = 'Orange'; // Set the option with index 2 as selected => Sets the 'Banana' option as selected document.querySelector('#choose-fruit').selectedIndex = 2;

For a multiple valued select, setting multiple selected options can be done by setting the selected attribute of the required option.

// choose the first option document.querySelector('#choose-fruit-multiple').options[0].selected = true; // also choose the third option document.querySelector('#choose-fruit-multiple').options[2].selected = true;

This will obviously work for single valued select also, but using the value property is much direct for them.

Getting the Value and Text/Label of the Selected Options

The selectedOptions property of the select element gives the list of options that are currently selected. Each element in this list is a DOM element — so you can use the value and text property to get the value and inside text of the option.

// For a normal select (and not multi-select) the list would contain only a single element var text = document.querySelector('#choose-fruit').selectedOptions[0].text; var value = document.querySelector('#choose-fruit').selectedOptions[0].value;

For a multiple select element, you can loop over the list to get all selected options.

var selected_options = document.querySelector('#choose-fruit-multiple').selectedOptions; for(var i=0; i // output Orange 2 Grapes 5

Adding an Option

The add method can be used to add a new option in the select. You can also specify the exact positon where the option needs to be inserted.

var option = document.createElement('option'); option.text = 'BMW'; // append option at the end // new options will be Volvo, Audi, Mercedes & BMW document.querySelector('#choose-car').add(option, null);

var option = document.createElement('option'); option.text = 'BMW'; // append option before index 0 // new options will be BMW, Volvo, Audi & Mercedes document.querySelector('#choose-car').add(option, 0);

var option = document.createElement('option'); option.text = 'BMW'; // append option before index 2 // new options will be Volvo, Audi, BMW & Mercedes document.querySelector('#choose-car').add(option, 2);

Deleting an Option

The remove method can be used to delete an option at a specified index.

// remove the option at index 1 // new options will be Volvo & Mercedes document.querySelector('#choose-car').remove(1);

Источник

Html select get value and text