Get dropdown selected value and selected text using jQuery inside script editor web part in SharePoint Online

Here 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. I have put the code inside a script editor web part to retrieve the details.

Also, you can read:
How to show modal pop up in SharePoint Online or SharePoint 2016 using the client-side code?

SharePoint Online Delete all Items from the list using JavaScript Object model

Steps to retrieve alternative languages from language settings in SharePoint online using JavaScript object model?

Below is the full code:

Select Country
<select id=”ddlCountry”>
<option value=”1″>India</option>
<option value=”2″>Srilanka</option>
<option value=”3″>Pakistan</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.

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →