Creating or duplicating drop down menu in JS

[director87]

I have a dilemma. I have a form with a SELECT menu with several "treatments". I wan't users to be able to select as many treatments as they'd like. I've found an AJAX script that does most of the work for me, however, I'm having trouble creating the select menu in Javascript as a new element (and maintaining all the original options).

 

The script:

 

this.addElement = function( element ){

	// Make sure it's a file input element
	if( element.tagName == 'SELECT' ){

		// Element name -- what number am I?
		element.name = 'trat_' + this.id++;

		// Add reference to this object
		element.multi_selector = this;

		// What to do when a file is selected
		element.onchange = function(){

			// New file input
			var new_element = document.createElement( 'select' );

			// Add new element
			this.parentNode.insertBefore( new_element, this );

			// Apply 'update' to element
			this.multi_selector.addElement( new_element );
			// Update list
			this.multi_selector.addListRow( this );

			// Hide this: we can't use display:none because Safari doesn't like it
			this.style.position = 'absolute';
			this.style.left = '-1000px';

		};
		// If we've reached maximum number, disable input element
		if( this.max != -1 && this.count >= this.max ){
			element.disabled = true;
		};

		// File element counter
		this.count++;
		// Most recent element
		this.current_element = element;

	} else {
		// This can only be applied to file input elements!
		alert( 'Error: not a file input element' );
	};

};

 

 

My problem is : new_element = document.createElement( 'select' )

 

How do I go about creating the options in which the user selects? Or even better, preserve the original select box? Thanks for any and all help.

 

[RichardRotterdam]

do you mean you want to add options to an existing select? I have done this one time by using innerHTML="<option></option>"

how ever that didn't work in ie 6 but there is a work around

[fenway]

you can make a new Option().