jQuery get the selected dropdown value on change

jQuery get selected option value onchange

Get the selected value of dropdown in jquery by using id, name, class, text, tag; In this tutorial, you will learn how to get selected value of dropdown in jquery by id, name, class, text and tag with on change event.

How To Get Selected Option Value In jQuery using onChange

• jQuery change() Event Method
• Syntax jQuery change() Event Method
• Parameters of jQuery change() Event Method
• Example 1 :- jQuery get the selected dropdown value on change by id
• Example 2 :- jQuery get the selected dropdown value on change by name
• Example 3 :- jQuery change() event with JavaScript GetElementById

jQuery change() Event Method

The JQuery change () event occurs when the value of an HTML element changes. It only works on the form fields. When the change event occurs, the change () method encloses a function to run.

For the selected menu, the change event occurs when an option is selected. For text field or text fields, the occurrence of change occurs when the field loses focus after the content changes.

Syntax jQuery change() Event Method

Trigger the change event for the selected elements:

Parameters of jQuery change() Event Method

Example 1 :- jQuery get the selected dropdown value on change by id

Take an example of jquery get selected option value on change by id; see the following

     div    Test Java Python Ruby PHP Jquery  $('#select_id').on('change', function() < $('#location').text(this.value); >);   

Example 2 :- jQuery get the selected dropdown value on change by name

Take an example of jquery get selected option value on change by name; see the following

$('select[name="lang"]').on('change', function() < $('#location').text(this.value); >);

     div    Test Java Python Ruby PHP Jquery  $('select[name="lang"]').on('change', function() < $('#location').text(this.value); >);   

Example 3 :- jQuery change() event with JavaScript GetElementById

Let’s see an example with demonstrate jQuery change().

     div    Test Java Python Ruby PHP Jquery  $( "select" ).change(function () < document.getElementById("location").innerHTML="You selected: "+document.getElementById("select_id").value; >);   

Conclusion

Getting the selected option value in jQuery using the onChange event is a simple task that can be accomplished in just a few lines of code. By following the steps outlined in this tutorial, you can easily retrieve the selected value of a dropdown list by it’s name, id, class and tag and use it in your web application to enhance the user experience.

Recommended jQuery Tutorial

1. How to Get the Current Page URL in jQuery
2. jQuery Ajax Get() Method Example
3. get radio button checked value jquery by id, name, class
4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
5. jQuery Get Data Text, Id, Attribute Value By Example
6. Set data attribute value jquery
7. select multiple class in jquery
8. How to Remove Attribute Of Html Elements In jQuery
9. How to Checked Unchecked Checkbox Using jQuery
10. jQuery removeClass & addClass On Button Click By E.g.
11. Get and Set Input, Select box, Text, radio Value jQuery

Author Admin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Источник

Html select onchange get value

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

# Get the Value/Text of Select or Dropdown on Change

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

1. Add a change event listener to the select element.
2. Use the value property to get the value of the element, e.g. select.value .
3. 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.

Источник

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 Español Português  

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.

    English Español Português  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();   

Источник

How to Select Onchange in JavaScript

JavaScript offers a variety of built-in features to minimize the time and effort of developers. JavaScript interacts with the HTML elements to make an interactive look for websites. It is possible through an onchange event that is triggered when the user changes the selected option via element. This post explains the selection of onchange events along with a practical example in JavaScript. The content that demonstrates this post is as follows.

How to Select Onchange in JavaScript?

The onchange event occurs when the element value is modified. It is specifically used in checkboxes for form validation. For instance, a drop-down list is utilized, having different options. The onchange event is called whenever the user selects any option. All modern browsers are compatible with this event.

An example is provided to select a value using the onchange event. It is divided into HTML and JavaScript files. This example code is provided below:

The description of the code is listed here:

• First, a dropdown list is created by assigning the id “education” within tags
• In this list, different options are provided as “School”, “College” and “University” on behalf of the onchange event.
• The onchange event is called if one of the previously mentioned options is selected.
• Lastly, the tag is used to attach the JavaScript file “js”.

The “test.js” file contains the following code:

JavaScript Code

function GetSelectedTextValue ( education ) {
var sleTex = education. options [ education. selectedIndex ] . innerHTML ;
var selVal = education. value ;
alert ( «Selected Text: » + sleTex + » Value: » + selVal ) ;
}

The description of the code is given below:

• The GetSelectedTextValue() method is used by passing the “education” as an argument.
• A “sleTex” variable is employed to extract the value of education from the HTML
• After that, “selVal” variable is used to retrieve the value of education.
• In the end, an alert box is generated that extracts the text as well as value by “sleTex” and “selVal”.

The output shows the dropdown list of “School”, “College” and “University” options. The onchange event is called if the specific option is selected. Finally, it displays the value of the selected text in the pop-up window.

Conclusion

JavaScript has a built-in event onchange that occurs when the value of an element is selected by the user. For this purpose, a dropdown list is generated to select a value on behalf of the onchange event.

It is useful to provide a cross-check facility when selecting an option. In this post, you have experienced how to select text as well as value by utilizing onchange events.

About the author

Syed Minhal Abbas

I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.

Источник