A little perspective:

I have a table representing user data with each cell editable. When the user clicks on a cell, the innerHTML of that td is replaced with an edit mode. One of the cells in my table replaces it's content with two selects and two radio inputs. I retrieve the options from the backend through ajax, create a select statement string (and cache that string), then use innerHTML to add it to the table cell.

The problem:
In all browsers the select statements fire onchange the second you click on the select, so one cannot actually select any value. I have not been able to trace why this is happening nor have i located an explaination on the net.

i've included the processing function, which is part of a larger object and I'm using the prototype toolkit:

renderSelectBoxes: function(childId){
if (! this.htmlElement) { return; }
// clear prior content
this.htmlElement.innerHTML = '';

// the parentSel isn't set, no ajax call has yet been made, send request
if (! isset(this.parentSel)){
this.getSelectBox(childId);
return;
}

// requesting the parent select, no children
if (childId == this.rootId){
this.parentId = this.rootId;
this.childId = "";
this.childSel = "";
} else {
this.parentId = this.childToParent[childId];

if (this.parentId == this.rootId){
this.parentId = childId;
this.childId = "";
} else {
this.childId = childId;
}
}

// look in the cache first !* do not use this.childId as it may be ""
if (isset(childId)){
this.childSel = this.cache[this.parentId];

// undefined child node
if (! isset(this.childSel)){
this.getSelectBox(childId);
return;
}
}

// append both select boxes and radio options
this.ajaxCount = 0;
this.htmlElement.innerHTML = this.parentSel + " " + this.childSel;
this.getRadioOptions(this.htmlElement);

// attach event listener
/*var self = this;
Event.observe(this.htmlElement.firstChild,"change",function(e){
var el = getEventTarget(e);
self.renderSelectBoxes($F(el));
}, false);*/
//this.htmlElement.firstChild.onchange = this.onSelectParent.bindAsEventListener(this);

// select the appropriate value
selectValue(this.htmlElement.firstChild, this.parentId);
if (isset(this.childSel)){
//selectValue(this.htmlElement.childNodes[1], this.childId);
}
}

values of the members used in this function are

this.htmlElement = table cell html node
this.rootId = 0;
this.getSelectBox = function that performs ajax request
this.cache = array cache of select strings
this.childToParent = array cache parentId relative to childId
selectValue = function that sets the value of a select
this.getRadioOptions = function to add radio inputs
this.parentCell = "<select name="categorySelect_parent" style="width: 194px;">
<option value="77635">Amusement & Entertainment</option>
<option value="60003">Arts & Entertainment</option>
<option value="60004">Automotive</option>
<option value="60005">Business & Professional Services</option>
<option value="500000">Charges, Fees, & Interest</option>
<option value="509000">Child</option>
<option value="60006">Clothing & Accessories</option>
<option value="60007">Community & Government</option>
<option value="60008">Computers & Electronics</option>
<option value="60009">Construction & Contractors</option>
<option value="60010">Education</option>
<option value="60300">Electronics</option>
<option value="60011">Food & Dining</option>
<option value="60012">Health & Medicine</option>
<option value="60013">Home & Garden</option>
<option value="60014">Industry & Agriculture</option>
<option value="60016">Media & Communications</option>
<option value="60017">Personal Care & Services</option>
<option value="60018">Real Estate</option>
<option value="60019">Shopping</option>
<option value="60020">Sports & Recreation</option>
<option value="60021">Travel & Transportation</option>
<option value="501000">Uncategorized</option>
</select>"

childSel = "<select name="categorySelect_child" style="width: 194px;">
<option value="60223">Arcades & Amusements</option>
<option value="60224">Carnivals, Fairs, & Festivals</option>
<option value="60225">Children's & Family Entertainment</option>
<option value="60226">Clubs & Nightlife</option>
<option value="60227">Cultural Attractions, Events, & Facilities</option>
<option value="60228">Entertainment Industry</option>
<option value="60229">Event Planning</option>
<option value="60233">Sports & Entertainment Tickets</option>
<option value="60234">Tours & Charters</option>
</select>"

Additional Information:
I originally used the DOM to do this and everything worked fine in non-IE browsers, but i was never able to stabalize IE, so i've moved back to using innerHTML. I have not tried using the new Option() function yet, but am trying to avoid it as this rendering function can be called many times and i don't want to loop through an option array each time if possible.

Anyone have any ideas?

thanks,
cyberlogi