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:

You may like below JavaScript and jQuery tutorials:

• Get current weather using JavaScript in SharePoint Online/2013/2016
• Populate dropdown using jQuery from an array
• SharePoint online or SharePoint 2013 hide content type in Edit Form using jQuery
• How to bind the dropdown list from an array using jQuery? And how to retrieve form control values using jQuery?
• jQuery Tooltip Using Visual Studio
• How to show Progress Bar in Asp.Net using jQuery?
• Search Word or Substring from Paragraph or String using JavaScript and JQuery

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