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.
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 SPGuides.com
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.