Javascript not functioning with IE9

Question

I have a dropdown whose list is dependent on what is selected in another dropdown. The dropdown is populated by javascript. It works correctly in Chrome and FF but not in IE, all I get is a blank dropdown.

Here is the relevant code: price and mileage are 2 js arrays that hold the required info

var serviceMileage='<select name=\'servicing\' id=\'servicing\''+ 
'onfocus=\'setStyle(this.id);\''+
'onblur=\'setStyleBack(this.id);\'>';

for (var i=0;i<mileage.length;i++)
{serviceMileage=serviceMileage+'<option value='+price[i]+'>'+mileage[i]+'</option>'}
serviceMileage=serviceMileage+'</select>';

document.getElementById('servicing').innerHTML=serviceMileage;

Any pointers gratefully received!

Answer 1

Try write in this way:

var serviceMileage="<select name='servicing' id='servicing' onfocus='setStyle(this.id); onblur='setStyleBack(this.id);'>";

for (var i=0;i<mileage.length;i++){
    serviceMileage=serviceMileage+"<option value='"+price[i]+"'>"+mileage[i]+"</option>"
}
serviceMileage=serviceMileage+'</select>';

document.getElementById('servicing').innerHTML=serviceMileage;

Your problem is here probably:

... value='+price[i]+' ...

it should be

... value='"+price[i]+"'...