Adding default option on the fly to select with jQuery, removing and some more…

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?