RSS

code zone jQuery Crash Course – Day 3 | Handling items and lists

06 Mar

Today I ‘ m going to show you how to create a dynamic list using jQuery. In the following code, user can add or remove item from the list simply by clicking the relevant link.

<html>
<head>
<title>Simple Animation</title>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$('document').ready(function(){
var size = $('option').size() + 1;

$('#addItem').click(function()
{
$('<option>' + size + '</option>').appendTo('#list');
size++;
});

$('#removeItem').click(function()
{
$('option:last').remove();
size--;
});

});

</script>

</head>

<body>
<a href="#" id="addItem">Add</a> | <a href="#" id="removeItem">Remove</a>
<select name="list"  id="list">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>

Advertisements
 
Leave a comment

Posted by on March 6, 2012 in jQuery

 

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: