jQuery Get Selected Option Value By Name, Id, Text, Class Example

If you are making dropdowns or want to do any dynamic implementation with dropdowns using jQuery. So for this you have to get the selected option value of the dropdown. Then this tutorial is for you only.

So, In this tutorial, you will learn how to get the selected dropdown option value by name, id, text, class and tag in jQuery.

To get the selected dropdown option value in jQuery, you must first identify the select element and then use the val() function to get the selected option’s value in jQuery.

The val() function is a handy jQuery method for getting or setting an element’s value by it’s name, text, id, class and attribute. To get the selected dropdown option’s value from a select element by name, id, class, text and tag, you may use change() and val() functions.

How to Get Selected Dropdown Option Value By Name, Id, Text, Class Example

There are several ways to get selected dropdown option value by name, id, class, or text in jQuery; is as follows:

• Method 1: Get selected option value by name in jQuery
• Method 2: Get selected option value by id in jQuery
• Method 3: jQuery get selected option by class
• Method 4: jQuery get selected option by text

Method 1: Get selected option value by name in jQuery

When using the name selector in jquery to select an option value. So, you can get the value of the selected option by first selecting the select element using the .val() method.

For example:

$(document).ready(function() {
  $("select[name='myName']").change(function() {
    var selectedValue = $(this).val();
    console.log("Selected option value (using Name): " + selectedValue);
  });
});

You can use this code with your HTML. Because this will select the selected element with the name “mySelect” and get its current value.

Method 2: Get selected option value by id in jQuery

Similarly, when using an ID selector, you can get the selected option value by selecting the selected element with a specific ID and using the .val() method.

For example:

$(document).ready(function() {
  $("#myId").change(function() {
    var selectedValue = $(this).val();
    console.log("Selected option value (using ID): " + selectedValue);
  });
});

You can use this code with your HTML, so, you can select the selected option value with the id “mySelect” and get its current value.

Method 3: jQuery get selected option by class

If you like to use a class selector in jQuery to get a selected option value, you can get the selected option value by selecting a select element with a specific class and using .val() method.

For example:

$(document).ready(function() {
  $(".myClass").change(function() {
    var selectedValue = $(this).val();
    console.log("Selected option value (using Class): " + selectedValue);
  });
});

You can use this code with your HTML, so, you can select the selected option value with the class “mySelectClass” and get its current value.

Method 4: jQuery get selected option by text

The last method, if you want to get the selected option value based on its text in jQuery, you can use the :selected selector along with the .text() method.

For example:

$(document).ready(function() {
  $("#myId").change(function() {
    var selectedText = $(this).find(":selected").text();
    console.log("Selected option value (using Text): " + selectedText);
  });
});

This will select the selected option element within the select element and get its text content.

Conclusion

In conclusion, with jQuery, getting the selected option value is a straightforward process that can be achieved using different selectors based on your specific needs. Whether you prefer to use the name, id, class, or text selector.

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