Tuesday, March 6, 2012

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

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.

[sourcecode language="javascript"]
<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>

[/sourcecode]

No comments:

Post a Comment

How to enable CORS in Laravel 5

https://www.youtube.com/watch?v=PozYTvmgcVE 1. Add middleware php artisan make:middleware Cors return $next($request) ->header('Acces...