Populate dropdown using jQuery from array

populate dropdown using jquery

In this jQuery tutorial, we will discuss how to populate dropdown using jQuery from array.  We will see how to populate dropdown using jquery. Here I have a SharePoint web part page and I have added the code inside a script editor web part in SharePoint Online.


Here I have an array which has 3 elements like below:

var allwebsites = new Array (“TSInfo Technologies.com”,”EnjoySharePoint.com”,”SharePointSky.com”);

We will try to bind a drop-down list from this array using jQuery on a button click.

Below is the full code.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

<input type=”button” value=”Bind Web Sites” id=”btnBind” />

<select id=”ddlWebSites”></select>

<script language=”javascript” type=”text/javascript”>
$(document).ready(function () {

$(“#btnBind”).click(function () {

BindWebSites();

});
});

function BindWebSites(){
var allwebsites = new Array (“TSInfo Technologies.com”,”EnjoySharePoint.com”,”SharePointSky.com”);

for (i = 0; i < allwebsites.length; i++) {

$(‘#ddlWebSites’).append(‘<option>’ + allwebsites[i] + ‘</option>’)

}
}

</script>

Here I have called a method knwon as BindWebSites() on the button click using jQuery. Once the user clicks on the button, it will populate dropdown from an array in jQuery. You can see the result like below:

populate dropdown using jquery
populate dropdown from array using jquery

Read some jQuery tutorials:



In this jQuery tutorial, we discussed how to populate dropdown using jquery from an array.

Check out Best Alternative to InfoPath -> Try Now

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 →