How to Get Value or Selected Option in Select Dropdown List Using Javascript and jQuery Full Tutorial For Beginners

How to Get Value or Selected Option in Select Dropdown List Using Javascript and jQuery Full Tutorial For Beginners

 

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

 

 

<!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>

 

See also  Javascript Project to Build a Youtube Video URL Shortener in Browser Using Bootstrap4 & HTML5 Full Project For Beginners

 

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

See also  Build a Node.js & Express Monetized REST API Using Stripe Metered Billing Checkout in Browser Full Project For Beginners

 

 

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

 

 

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

 

 

<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

See also  Node.js Tutorial to Download Full Github Project Source Code to Local Folder Using get-github-code Library in Javascript Full Project For Beginners

 

 

$( "#myselect" ).val();

 

 

In order to get the text property of the selected option we will use the the text method

 

 

$( "#myselect option:selected" ).text();

 

 

Leave a Reply