How To Get Selected Option Value In jQuery

Are you a web developer who is looking to enhance your front-end skills? If yes, then you're in the right place.

jQuery provides a wide range of tools to make your web pages dynamic and interactive. One important task is selecting and manipulating the values of dropdown menus, a common feature on websites.

Whether you want to validate user inputs, trigger specific actions, or customize user experiences, understanding how to extract selected option values is essential.

In this blog, we will help you retrieve and use selected option values in your web applications. Keep scrolling to upgrade your skills:
 

Example:

In this example, we will retrieve the value of the selected item in a dropdown. This value can be obtained when a change event occurs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value - Techsolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.language").change(function(){
        var selectedLanguage = $(this).children("option:selected").val();        
      	$("p").text("You have selected the language - " + selectedLanguage);
    });
});
</script>
<style>
  body{
  	margin:100px;
  }
</style>
</head> 
<body>
  <h2>How To Get Selected Option Value In jQuery - Techsolutionstuff</h2>
    <form>
        <label>Select Country:</label>
        <select class="language">
            <option value="laravel">Laravel</option>
            <option value="php">PHP</option>
            <option value="jquery">jQuery</option>
          	<option value="mysql">MySQL</option>
          	<option value="python">Python</option>
        </select>
    </form>
  	<p></p>
</body>
</html>

Output:

how_to_get_selected_option_value_using_jquery

 

Example:

In this example, we will demonstrate how to select multiple options in a dropdown and retrieve their values using jQuery.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Get the multiple selected value of the dropdown in javascript - Techsolutionstuff</title>
  <style>
    div {
      	color: red;
    }
    body{
    	margin: 100px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <h3>Get the selected value of the dropdown in javascript - Techsolutionstuff</h3>
<select name="language" multiple="multiple">
  <option>Laravel</option>
  <option selected="selected">PHP</option>
  <option>jQuery</option>
  <option selected="selected">MySQL</option>
  <option>Python</option>  
</select>
<br><br><div></div>
 
<script>
$("select").change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text("You have selected the languages - " + str );
  })
  .trigger( "change" );
</script>
 
</body>
</html>

Output:

how_to_get_multiple_selected_option_value_using_jquery

 

Example:

In this example, we will add the selected option value to an array called "language."

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Option Values - Techsolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function(){
        var language = [];
        $.each($(".language option:selected"), function(){            
            language.push($(this).val());
        });
        alert("You have selected the languages - " + language.join(", "));
    });
});
</script>
</head>
<body>
	<h3>jQuery Get Multiple Option Values - Techsolutionstuff</h3>
    <form>
        <label>Language:</label>
        <select class="language" multiple="multiple" size="5">
            <option>Laravel</option>
            <option>PHP</option>
            <option>jQuery</option>
            <option>Python</option>
            <option>React</option>
        </select>
        <button type="button">Get Values</button>
    </form>
</body>
</html>

 

Conclusion:

Extracting the selected option value in jQuery is an important skill for any web developer. It helps you create interactive and responsive web applications that enhance the user experience. By utilizing jQuery's simple yet versatile methods, you can effortlessly access and manipulate option values in your HTML forms.

As you continue to explore and experiment with jQuery, you'll find that this knowledge opens doors to endless possibilities. From dynamic dropdown menus to data-driven form handling, your ability to retrieve and work with selected option values will prove invaluable. So, keep exploring jQuery, and you'll be on your way to building engaging and user-friendly web applications.
 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS