innerHTML issue on select lists in IE8 & 9

wexas
wexas used Ask the Experts™
on
We've got a script that sends an Ajax request - returning a bunch of related values and inserting these into the innerHTML of a select list. We're also using JQuery JQTransform to style the menu (http://archive.plugins.jquery.com/project/jqtransform).

example.....

// JS
window.onload=initialise;

var g = {};
g.strOutput = "";

function initialise() {
	document.getElementById("enquiry_continent").onchange = sendRequest;
}

function sendRequest() {
	if (XMLHttpRequest) {		
		g.xhr = new XMLHttpRequest();
	}
	
	else if (ActiveXObject) {	
		g.xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	else {
		alert("Unable to create XMLHttpRequest");
	}
	
	if (g.xhr) {
		
	g.xhr.onreadystatechange = displayResults;	
	// method | file | async 
	var continentVal=document.getElementById("enquiry_continent").value;
	g.xhr.open("GET","/scripts/ajax/destination_dropdown.php?q="+continentVal,true);
	g.xhr.send();
	}
	
}

function displayResults() {

	if (g.xhr.readyState == 4) {
		if (g.xhr.status == 200) {
			
  			var strResult = g.xhr.responseText;
			document.getElementById("enquiry_country").innerHTML=strResult;
			fix_select('select#enquiry_country');

		}
	}
}

Open in new window

// HTML
<p>
              <label>Geographical region *</label>
              <select id="enquiry_continent" name="enquiry_continent" class="required list">
				<option value="">Region</option>
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Australasia and Pacific">Australasia and Pacific</option>
<option value="Caribbean">Caribbean</option>
<option value="Central America">Central America</option>
<option value="Europe">Europe</option>
<option value="Indian Ocean">Indian Ocean</option>
<option value="Indian Subcontinent">Indian Subcontinent</option>
<option value="Middle East">Middle East</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
              </select>
            </p>
	    
	    <p>
	     <label>Country</label>
           <select id="enquiry_country" name="enquiry_country" class="list">
           </select>
</p>

Open in new window

If we place the 'enquiry_country' id outside of the select menu, the styling is removed when the values are returned. If we place it inside like above, it doesn't work in IE.

Any ideas?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Make a div and wrap the options in select tags and change the innerhtml of the div instead

Ps: I STRONGLY suggest you use jQuery since that reduces your script to about two cross browser compatible lines
Michel PlungjanIT Expert
Top Expert 2009

Commented:
What does FixSelect do and what does the console say?

Can you try

<label>Country</label>
<div id="enquiry_country_div"></div>  


and
var strResult = g.xhr.responseText;
document.getElementById("enquiry_country_div").innerHTML='<select  id="enquiry_country"  name="enquiry_country"  class="list">'+strResult+'</select>':

Open in new window

Author

Commented:
We tried this and what happens is the select list is returned successfully but the styling from JQTransform is removed. That is what the 'fix_select('select#enquiry_country');' was trying to do. Any ideas on resolving this?
IT Expert
Top Expert 2009
Commented:
That will never work

jqTransform rewrites the complete form into something completely different.

I suggest you reload the complete form into the container and reapply the transform on the complete form. You can hide the container while you do it

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial