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>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
	</head>
	<body>
		<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>
			</select>
		</form>
	</body>
		<script>
			window.addEvent('domready', function(){
				$('addTo').addEvent('click', function(event){
				                   var textbox= document.id('srctxt');
				                   var selectBox= document.id('target');
				                   var element=new Element('<option>',{'value':selectBox.length+1,'html':textbox.get('value')});
				                   textbox.set({'value':''});
				                   selectBox.add(element);
				                   alert('added in the dropdown');
				});
			});
			</script>
	</html>

 

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".

 

Explanation:

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.

 

Demo: