Get dropdown selected value and text using jquery in SharePoint Online

This jQuery tutorial we will discuss, how we can get drop down list selected value and selected text using jQuery. I was having a requirement to get the dropdown selected text and selected value in my SharePoint online site.

Here I have put the code inside a script editor web part to get dropdown selected value using jquery in SharePoint Online.

Get dropdown selected value using jQuery

Here I have a dropdown list which has 3 values like:

  • USA
  • UK
  • Canada

By using jQuery we will retrieve the selected value and text of the dropdown list.

Select Country
<select id="ddlCountry">
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">Canada</option>
</select>
<input type="button" id = "btnSelectDropDownValue" value="Retrieve Dropdown Value" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSelectDropDownValue").click(function () {
var selectedText = $("#ddlCountry").find("option:selected").text();
alert (selectedText);
var selectedValue = $("#ddlCountry").val();
alert (selectedValue);
});
});
</script>

Once you click on the button it will show you the dropdown selected value and selected text in an alert box. You can see the output like below:

Get dropdown selected value and text using jquery
Get dropdown selected value and text using jquery

You may like below JavaScript and jQuery tutorials:

Hope this tutorial helps to get dropdown selected value using jQuery.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Bijay,
    I new to SPO(SharePoint Online) and I believe you are missing a few pieces to the instructions listed above and getting a dropdown selection in SPO. I see the post was created 2 years ago, so do you think selections or options have changed because I cannot get a dropdown setup because I can’t visualize or follow your steps above. Where am i adding this code and isn’t the first line going to generate an error “Select Country”?

    • Hey Matt, The code will work as it is. I have added a screenshot for the same. I have added the code inside a script editor web part and you can see the output now also.

      Thanks for your valuable comment.

  • >