How can I add or remove option dynamically on the select element using jQuery
Using the following snippet, you can do the following and related tasks of adding default options or working with elements that are created dynamically at the client side
- How to add default option to select
- How to manipulate elements that are created on the fly
Selecting element with multiple classes with jQuery
<html>
<head><title>Adding default selection list</title>
</head>
<body>
<select name = "items" id="items">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
</select>
<input type = "button" name="checkme" id = "checkme" value='check me' />
<p class='static'>Existing Paragraph</p>
<div class='newly'></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>
$('#items').prepend('<option value= '' selected='selected'>Select Item Please</option>');
$('#checkme').click(function(){
if ($('#items').val() != ""){
$('<p>Yup you have selected ' + $('#items').val()+'<a href=''>delete</a></p>').appendTo('.newly');
}else{
alert('Plase select proper item');
}
});
$('p a').live('click',(function(){
var remove = confirm("You sure to delete?");
if (remove){
$(this).parent().remove();
}
return false;
}));
</script>
</body>
</html>
The prepend function on the selected element would put the given element on top of the list – there is also an append version of it
It would be difficult to access the elements that are created on the fly/dynamically with jQuery without the use of live() – it binds the given click event to newly created elements.
Why binding/unbinding not working on firefox?
Finally, when we delete, we want to delete the the paragraph as the whole that contains the anchor. Most of the time we want to do it with in the div tag.
In this case the anchor (a) is a child of the paragraph (p) – that is where the .parent().remove()
would come to play.
Populate selectbox from JSON with jQuery
Do you know how to add anchor dynamically to text?
See how you would solve these known algorithm problems
Find the pairs that makes K Complementary in the given array java solutionFind the first occurence of number in the sorted array
find longest word in the sentence
Get maximum occurring character
Find longest palindrom from sequence of characters
Find K Complementary numbers from array Java implementation
Flatten nested javascript array
testing k complementary pairs algorithm with junit
Implement Queue Using two Stacks – JavaScript algorithm
Implementing tokenizer and adding tokens to the linked list
Dudley Nocera
Good blog post. I absolutely appreciate this site. Thanks!