Simple application using appendto() function in JQUERY
<!doctype>
<html>
<head>
<title>Jquery Select All</title>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$(document).ready(function(){
$('#add').click(function(event){
event.preventDefault();
var optionName = $('#newColorName').val();
var optionValue = $('#newColorValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#colors');
});
$('#remove').click(function(event){
event.preventDefault();
var $select = $('#colors');
$('option:selected',$select).remove();
});
});
</script>
</head>
<body>
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</option>
<option>Blue</option>
<option>Brown</option>
</select>
<button id="remove">Remove Selected Color(s)</button>
<br/>
<label for="newColorName">New Color Name</label>
<input id="newColorName" type="text" /><br/>
<label for="newColorValue">New Color Value</label>
<input id="newColorValue" type="text" /><br/>
<button id="add">Add New Color</button>
</body>
</html>
Discussion
I use the .attr() and .text() methods to populate the <option> element:
$('<option/>').attr("value",optionValue).text(optionName).appendTo('#colors');
However, the same line could be rewritten so that the <option> element is built in one
step, without using the methods:
$('<option value="'+optionValue+'">'+optionName+'</option>').appendTo('#colors');
Concatenating all the <option> data like that would be a fraction of a millisecond faster,
but not in any way noticeable by a human. I prefer using the .attr() and .text()
methods to populate the <option> element because I think that it is more readable and
easier to debug and maintain. With the performance issue being negligible, using one
approach or the other is the developer’s preference.
What would happen with JavaScript disabled? You would need to provide a server-side
alternative that processes the button clicks, and the user would have to wait for the
resulting page reloads.
LIVE DEMO
<!doctype>
<html>
<head>
<title>Jquery Select All</title>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$(document).ready(function(){
$('#add').click(function(event){
event.preventDefault();
var optionName = $('#newColorName').val();
var optionValue = $('#newColorValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#colors');
});
$('#remove').click(function(event){
event.preventDefault();
var $select = $('#colors');
$('option:selected',$select).remove();
});
});
</script>
</head>
<body>
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</option>
<option>Blue</option>
<option>Brown</option>
</select>
<button id="remove">Remove Selected Color(s)</button>
<br/>
<label for="newColorName">New Color Name</label>
<input id="newColorName" type="text" /><br/>
<label for="newColorValue">New Color Value</label>
<input id="newColorValue" type="text" /><br/>
<button id="add">Add New Color</button>
</body>
</html>
Discussion
I use the .attr() and .text() methods to populate the <option> element:
$('<option/>').attr("value",optionValue).text(optionName).appendTo('#colors');
However, the same line could be rewritten so that the <option> element is built in one
step, without using the methods:
$('<option value="'+optionValue+'">'+optionName+'</option>').appendTo('#colors');
Concatenating all the <option> data like that would be a fraction of a millisecond faster,
but not in any way noticeable by a human. I prefer using the .attr() and .text()
methods to populate the <option> element because I think that it is more readable and
easier to debug and maintain. With the performance issue being negligible, using one
approach or the other is the developer’s preference.
What would happen with JavaScript disabled? You would need to provide a server-side
alternative that processes the button clicks, and the user would have to wait for the
resulting page reloads.
LIVE DEMO
No comments:
Post a Comment
Thank your for your comment..your submitted coment will be live after admin approval