Iframe实现下拉框联动

时间 2021-08-15 标签 html app ide oop spa xml htm get

下拉框页面：html

  
  
           
  
  
   
   
            
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
            
   
   <html xmlns="http://www.w3.org/1999/xhtml"> 
   
   
            
   
   <head> 
   
   
            
   
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
   
   
            
   
   <title>连动SELECT</title> 
   
   
            
   
   <script> 
   
   
            
   
   function fun1(){  
   
   
            
   
       document.getElementById("iframe1").src="iframe1.html";  
   
   
            
   
   }  
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
    
   
   
            
   
   <body> 
   
   
            
   
   SELECT1<select id="select1" onchange="fun1();"> 
   
   
            
   
   <option value="0">---请选择---</option> 
   
   
            
   
   <option value="1">蔬菜</option> 
   
   
            
   
   <option value="2">水果</option> 
   
   
            
   
   <option value="3">肉类</option> 
   
   
            
   
   </select> 
   
   
            
   
   SELECT2<select id="select2" > 
   
   
            
   
   <option value="0">---请选择---</option> 
   
   
            
   
   </select> 
   
   
            
   
   <iframe id="iframe1" style="display:none"></iframe> 
   
   
            
   
   </body> 
   
   
            
   
   </html>

Iframe页面：app

  
  
           
  
  
   
   
            
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
            
   
   <html xmlns="http://www.w3.org/1999/xhtml"> 
   
   
            
   
   <head> 
   
   
            
   
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
   
   
            
   
   <title>初始化另外一个SELECT2</title> 
   
   
            
   
   <script> 
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
    
   
   
            
   
   <body> 
   
   
            
   
   <script> 
   
   
            
   
   var select1 = parent.document.getElementById("select1");  
   
   
            
   
   var select2 = parent.document.getElementById("select2");  
   
   
            
   
    
   
   
            
   
    
   
   
            
   
   if(select1.value=="1"){  
   
   
            
   
       select2.length=1;  
   
   
            
   
       var ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "1";  
   
   
            
   
       ooption.innerHTML="萝卜";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
       ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "2";  
   
   
            
   
       ooption.innerHTML="白菜";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
   }  
   
   
            
   
   else if(select1.value=="2")  
   
   
            
   
   {  
   
   
            
   
       select2.length=1;  
   
   
            
   
       var ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "1";  
   
   
            
   
       ooption.innerHTML="苹果";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
       ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "2";  
   
   
            
   
       ooption.innerHTML="芒果";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
   }  
   
   
            
   
   else if(select1.value=="3"){  
   
   
            
   
       select2.length=1;  
   
   
            
   
       var ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "1";  
   
   
            
   
       ooption.innerHTML="羊肉";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
       ooption = document.createElement("option");   
   
   
            
   
       ooption.value = "2";  
   
   
            
   
       ooption.innerHTML="牛肉";  
   
   
            
   
       select2.appendChild(ooption);  
   
   
            
   
   }  
   
   
            
   
   else{  
   
   
            
   
       select2.length=1;  
   
   
            
   
   }  
   
   
            
   
    
   
   
            
   
   </script> 
   
   
            
   
   </body> 
   
   
            
   
   </html>