jQuery Get Selected Option From Dropdown

459 views 1 year ago jQuery

In this article, we will share with you how to get selected option value from a select box using jQuery with example. this is very common functionality and many times use in any web application. you can be done it using jQuery help in many ways. we will here share with you some helpful examples of how to get selected option value from the select box.

Example - 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head> 
<body>
    <form>
        <label>Select Language:</label>
        <select class="language">
            <option value="php">PHP</option>
            <option value="python">Python</option>
            <option value="java">Java</option>
        </select>
    </form>
	<script>
	$(document).ready(function(){
	    $("select.language").change(function(){
	        var selectedLanguage = $(this).children("option:selected").val();
	        alert("You have selected the language - " + selectedLanguage);
	    });
	});
	</script>
</body>
</html>

Example - 2

If you have no value for a option tag then how to get the selected option text from the select box. looks at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Text</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head> 
<body>
    <form>
        <label>Select Language:</label>
        <select class="language">
            <option>PHP</option>
            <option>Python</option>
            <option>Java</option>
        </select>
    </form>
	<script>
	$(document).ready(function(){
	    $("select.language").change(function(){
	        var selectedLanguage = $(this).children("option:selected").val();
	        alert("You have selected the language - " + selectedLanguage);
	    });
	});
	</script>
</body>
</html>

Example - 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head> 
<body>
    <form>
        <label>Select Language:</label>
        <select class="language">
            <option value="php">PHP</option>
            <option value="python">Python</option>
            <option value="java">Java</option>
        </select>
    </form>
	<script>
	$(document).ready(function(){
	    $('.language').on('change', function() {
            selectedLanguage = $('.language').find(":selected").val();
            alert("You have selected the language - " + selectedLanguage);
        });
	});
	</script>
</body>
</html>

Example - 4

In this example, we can get selected value by this keyword

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head> 
<body>
    <form>
        <label>Select Language:</label>
        <select class="language">
            <option value="php">PHP</option>
            <option value="python">Python</option>
            <option value="java">Java</option>
        </select>
    </form>
	<script>
	$(document).ready(function(){
	    $('.language').on('change', function() {
            selectedLanguage = this.value;
            alert("You have selected the language - " + selectedLanguage);
        });
	});
	</script>
</body>
</html>

We hope you like this small article and it is helpful to you. if you have any question then comment below.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]