join array elements, add array elements to dropdown list using jQuery
To perform any action on arrays by using normal javascript is very difficult. To do simple action like joining array elements also, we have to define our own functions.
But by using jQuery we can perform many typical actions on arrays.
In this article I am explaining some simple actions on arrays by using jQuery. In my coming articles I will explain more and more actions.
<html>
<head>
<title>javascript arrays using jQuery function</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var elems = ['Asp.Net', 'Vb.Net', 'C#.Net', 'Asp.Net MVC', 'Sharepoint']
//join array elements and add those elements to "joinarr" div tag
$(joinarr).text(elems.join('-'));
//display array elements one by one
// $(joinarr).html(elems.join('<br/>'));
//adding array elements to dropdownlist
var sellist = $('#selarr');
$.each(elems, function(val, text) {
sellist.append($('<option value=' + val + '>' + text + '</option>'));
});
//displaying the dropdownlist elements
var lans = $('#disarr').children();
var selitemstext;
selitemstext = 'There are ' + lans.length + ' elements in "disarr" dropdownlist and elements are: ';
$('#disarr').children().each(function() {
selitemstext += $(this).text() + ', ';
});
$('#selitems').text(selitemstext);
});
</script>
</head>
<body>
<div id="joinarr"></div>
<br />
<select id="selarr"></select>
<br />
<select id="disarr"><option value="0">Asp.Net</option><option value="1">Vb.Net</option><option value="2">C#.Net</option><option value="3">Asp.Net MVC</option><option value="4">Sharepoint</option></select>
<br />
<p id="selitems"></p>
</body>
</html>
Here we have javascript array "elems" which has some elements. We are performing different actions on it. I am explaining one by one.
var elems = ['Asp.Net', 'Vb.Net', 'C#.Net', 'Asp.Net MVC', 'Sharepoint']
//join array elements and add those elements to "joinarr" div tag
$(joinarr).text(elems.join('-'));
In the above code we are adding the all items of array "elems" to <div> tag whose id is "joinarr" as normal text. Here we used join() function to add all array elements with seperator "-".
var elems = ['Asp.Net', 'Vb.Net', 'C#.Net', 'Asp.Net MVC', 'Sharepoint']
//display array elements one by one
$(joinarr).html(elems.join('<br/>'));
Some times we have to display all array elements one by one. For this type of requirement we will use html() method to render text as HTML by giving <br/> as seperator to "join()" method.
var elems = ['Asp.Net', 'Vb.Net', 'C#.Net', 'Asp.Net MVC', 'Sharepoint']
//adding array elements to dropdownlist
var sellist = $('#selarr');
$.each(elems, function(val, text) {
sellist.append($('<option value=' + val + '>' + text + '</option>'));
});
In some situations, we have to add javascript array elements to the HTML control. For that we have append() jQuery method to append elements to HTML control. In the above code we are appending the our javascript array elements to the HTML drop down list control whose id is "selarr".
//displaying the dropdownlist elements
var lans = $('#disarr').children();
var selitemstext;
selitemstext = 'There are ' + lans.length + ' elements in "disarr" dropdownlist and elements are: ';
$('#disarr').children().each(function() {
selitemstext += $(this).text() + ', ';
});
$('#selitems').text(selitemstext);
Even we can get drop down list items and we can add these items to other HTML control. In the above code we are getting the "disarr" drop down list items and we are adding all these items to <p> tag whose id is "selitems".
Download source code: simple_array_funs.zip (36.01 kb)
