Welcome folks today in this blog post we will be talking about how to get value of selected option in dropdown list in javascript. All the source code will be given below.
Get Started
First we will do in javascript and we will use simple value property to get the selected option from dropdown list
In order to get started we need to create a index.html file and copy paste the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <title>Get Value of Selected Option in Select Dropdown</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <div class="container"> <br><br> <form id="form"> <div class="form-group"> <select class="form-control" name="scripts" id="scripts"> <option value="scroll">Scrolling Divs JavaScript</option> <option value="tooltip">JavaScript Tooltips</option> <option value="con_scroll">Continuous Scroller</option> <option value="banner">Rotating Banner JavaScript</option> <option value="random_img">Random Image PHP</option> <option value="form_builder">PHP Form Generator</option> <option value="table_class">PHP Table Class</option> <option value="order_forms">PHP Order Forms</option> </select> </div> <div class="form-group"> <button class="btn btn-block btn-danger"> Get Value </button> </div> </form> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> document.getElementById("form").addEventListener("submit",function(e){ e.preventDefault() var sel = document.getElementById('scripts'); // display value property of select list (from selected option) console.log(sel.value); }) </script> </html> |
If you run this code and as the form submits then it will console log the selected option in the console with the help of value property in javascript
Now if you want to get the whole option which was selected you can get it with the help of selectedIndex property in javascript like this
|
1 2 3 |
var sel = document.getElementById('scripts'); console.log(sel.options[sel.selectedIndex]) |
If you want to get the label of selected index in dropdown list in javascript you can do like this with the help of text property
|
1 2 3 4 |
var sel = document.getElementById('scripts'); console.log(sel.options[sel.selectedIndex].text) |
Get Value of Selected Option in jQuery
Now we will look at how to do the same in jQuery
|
1 2 3 4 5 6 7 |
<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select> |
This is the simple select box in html we have provided a id to it So now to get the value of selected option we will use val() method again in jquery
|
1 |
$( "#myselect" ).val(); |
In order to get the text property of the selected option we will use the the text method
|
1 |
$( "#myselect option:selected" ).text(); |
