codigo no funciona en firefox

[JAK^]

hola como estan les muestro el siguiente codigo, funciona perfecto en ie, pero en firefox no anda, es para cambiar el contenido de un campo select de un formulario.

Código:

function cambiar()
{
var index=document.forms.obra.op1.selectedIndex;

obra.op2.length=0; //esta seria la linea 14 donde da el error

if(index==0) obras1();
if(index==1) obras2();
if(index==2) obras3();

} 
function obras1(){
opcion0=new Option("Pared Simple","1","defauldSelected");
opcion1=new Option("Pared Doble","2","defauldSelected");
opcion2=new Option("Media Pared","3","defauldSelected");
opcion3=new Option("Revest. Sobre Omega","4","defauldSelected");



document.forms.obra.op2.options[0]=opcion0;
document.forms.obra.op2.options[1]=opcion1;
document.forms.obra.op2.options[2]=opcion2; 
document.forms.obra.op2.options[3]=opcion3; 
}
function obras2(){
opcion0=new Option("Pared Simple","5","defauldSelected");
opcion1=new Option("Pared Doble","6","defauldSelected");
opcion2=new Option("Media Pared","7","defauldSelected");
opcion3=new Option("Revest. Sobre Omega","8","defauldSelected");

document.forms.obra.op2.options[0]=opcion0;
document.forms.obra.op2.options[1]=opcion1;
document.forms.obra.op2.options[2]=opcion2; 
document.forms.obra.op2.options[3]=opcion3; 
}
function obras3(){
opcion0=new Option("Cielorraso junta tomada","9","defauldSelected");
opcion1=new Option("Cieloraso desmontable 0,61x0,61m","10","defauldSelected");
opcion2=new Option("Cieloraso desmontable 1,22x0,61m. Travesaño 0,61m","11","defauldSelected");
opcion3=new Option("Cieloraso desmontable 1,22x0,61mTravesaño 1,22m","12","defauldSelected");


document.forms.obra.op2.options[0]=opcion0;
document.forms.obra.op2.options[1]=opcion1;
document.forms.obra.op2.options[2]=opcion2; 
document.forms.obra.op2.options[3]=opcion3; 
}

function validar(){

if(isNaN(obra.mt.value) || obra.mt.value==0){
alert("NO es un dato dato valido. Ingrese una cantidad de mt2 valida");
obra.mt.value="";
var obj = document.getElementById('calcular');
obj.style.display="none";}

else {
var obj = document.getElementById('calcular');
obj.style.display="";
}

Código HTML:

 <form id="obra" name="obra" method="post" action="">
      <label>
      <select name="op1" id="op1" OnChange="cambiar()">
        <option value="0" selected="selected">Paredes Estructura cada 40cm </option>
        <option value="1">Paredes Estructura cada 48cm </option>
        <option value="2">Cielorrasos</option>
      </select>
      </label>
      <select name="op2" id="op2">
        <option value="1" selected="selected">Pared Simple</option>
        <option value="2">Pared Doble</option>
        <option value="3">Media Pared</option>
        <option value="4">Revest. Sobre Omega</option>
      </select>
       - -
       <label><input name="mt" type="text" id="mt" size="15" onchange="validar()" />
        
        </label>
        mt2
        <label>
        <input type="button" name="button" id="button" value="Aceptar" />
        </label>
        <p align="right"><br />
        <input type="submit" name="calcular" id="calcular" value="Calcular" style="display:none"   />
      </p>
      </label>
                <div align="left"></div>
    </form> 

lo que hace es segun lo seleccionado en el primer select cambia el contenido en el segundo. puse la consola de errores y me dice obra "is not defined" line 14

saludos muchas gracias espero su respuesta!!!!