In this tutorial we will learn how to add additional options to the exiting select box.

Objective: The value typed in a text box would be added to the give selection box by clicking the okey button.

<!DOCTYPE html>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<form id="myform">
			Add this text into <input type="text" id="srctxt" length="12" /> 
								<input type="button" id="addTo" value="Add" />
			<select id="target">
				<option value="">Please Add</option>
			window.addEvent('domready', function(){
				$('addTo').addEvent('click', function(event){
				                   var textbox='srctxt');
				                   var selectBox='target');
				                   var element=new Element('<option>',{'value':selectBox.length+1,'html':textbox.get('value')});
				                   alert('added in the dropdown');


In our form we have three elements, the input text ,input button and a target select field with id "target"

which is going to be populated with the value/text given in the input text "srctxt".



In Line 20 we mentioned that , when the button is clicked, the annonymous function executes to do the following.
Get the input text "srctxt" object,get the select box "target" object , and create an element object with option as a tag and value as the length+1 and html whatever the value of the textbox. Finally add this element to the selectBox, and finally show an alert.