unable to select an option from JavaScript drop down and onchange not called

[snreddy2503124]

in this below Java script drop down from Line.js, the onchange() is not called when i use mouse to select an option from drop down in mozilla environment. Even if I select an option the default one is reflecting. I was able to do the selections and it works well when I use key board up and down arrows followed by enter.
Where as in IE 8 it works well with mouse but not with keyboard.
Any quick solution will be highly appreciated.

this.myActivityButtonGui = slider.document.createElement("select");
 
      // this.myActivityButtonGui.options[this.myActivityButtonGui.options.length] = new Option("S", "C", false, false);
      // this.myActivityButtonGui.options[this.myActivityButtonGui.options.length] = new Option("M", "M", false, false);
      // this.myActivityButtonGui.options[this.myActivityButtonGui.options.length] = new Option("L", "R", false, false);
      // this.myActivityButtonGui.options[this.myActivityButtonGui.options.length] = new Option("G", "G", false, false);
      // this.myActivityButtonGui.options[this.myActivityButtonGui.options.length] = new Option("F", "F", false, false);
 
    var opt1 = document.createElement("option");
    var opt2 = document.createElement("option"); 
    var opt3 = document.createElement("option"); 
    var opt4 = document.createElement("option");
    var opt5 = document.createElement("option"); 
 
 
    opt1.value = "C";  
    opt1.text = "S";  
    opt1.id= "C";
 
    opt2.value = "M"; 
    opt2.text = "M";
    opt2.id= "M";
 
    opt3.value = "R"; 
    opt3.text = "L";
    opt3.id = "R";
 
    opt4.value = "G"; 
    opt4.text = "G";
    opt4.id = "G";
 
    opt5.value = "F"; 
    opt5.text = "F";
    opt5.id= "F";
 
    if(browserType.indexOf("MSIE")!= -1){
        this.myActivityButtonGui.add(opt1);
        this.myActivityButtonGui.add(opt2);
        this.myActivityButtonGui.add(opt3);
        this.myActivityButtonGui.add(opt4);
        this.myActivityButtonGui.add(opt5);
    }else{
        this.myActivityButtonGui.add(opt1,null);
        this.myActivityButtonGui.add(opt2,null);
        this.myActivityButtonGui.add(opt3,null);
        this.myActivityButtonGui.add(opt4,null);
        this.myActivityButtonGui.add(opt5,null);
 
    }
 
    this.myActivityButtonGui.onchange= function(){ // when i use //mouse with mozilla it is not coming into the loop that is onchange was //not fired.
    slElement.value = this.options[this.selectedIndex].value;
}
 

[acoder]

Do you have a test page demonstrating the problem?

PS. don't use browser sniffing, use a try/catch to add options.