下拉框页面：

 
    
     
         
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
         
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5.  
         
  5. <title>连动SELECT</title> 
    6.  
         
  6. <script> 
    7.  
         
  7. function fun1(){  
    8.  
         
  8.     document.getElementById("iframe1").src="iframe1.html";  
    9.  
         
  9. }  
    10.  
         
  10. </script> 
    11.  
         
  11. </head> 
    12.  
         
  12.  
    13.  
         
  13. <body> 
    14.  
         
  14. SELECT1<select id="select1" onchange="fun1();"> 
    15.  
         
  15. <option value="0">---请选择---</option> 
    16.  
         
  16. <option value="1">蔬菜</option> 
    17.  
         
  17. <option value="2">水果</option> 
    18.  
         
  18. <option value="3">肉类</option> 
    19.  
         
  19. </select> 
    20.  
         
  20. SELECT2<select id="select2" > 
    21.  
         
  21. <option value="0">---请选择---</option> 
    22.  
         
  22. </select> 
    23.  
         
  23. <iframe id="iframe1" style="display:none"></iframe> 
    24.  
         
  24. </body> 
    25.  
         
  25. </html> 
    26.  
        
 
    
Iframe页面：
 
    
 
    
     
         
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
         
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5.  
         
  5. <title>初始化另一个SELECT2</title> 
    6.  
         
  6. <script> 
    7.  
         
  7. </script> 
    8.  
         
  8. </head> 
    9.  
         
  9.  
    10.  
         
  10. <body> 
    11.  
         
  11. <script> 
    12.  
         
  12. var select1 = parent.document.getElementById("select1");  
    13.  
         
  13. var select2 = parent.document.getElementById("select2");  
    14.  
         
  14.  
    15.  
         
  15.  
    16.  
         
  16. if(select1.value=="1"){  
    17.  
         
  17.     select2.length=1;  
    18.  
         
  18.     var ooption = document.createElement("option");   
    19.  
         
  19.     ooption.value = "1";  
    20.  
         
  20.     ooption.innerHTML="萝卜";  
    21.  
         
  21.     select2.appendChild(ooption);  
    22.  
         
  22.     ooption = document.createElement("option");   
    23.  
         
  23.     ooption.value = "2";  
    24.  
         
  24.     ooption.innerHTML="白菜";  
    25.  
         
  25.     select2.appendChild(ooption);  
    26.  
         
  26. }  
    27.  
         
  27. else if(select1.value=="2")  
    28.  
         
  28. {  
    29.  
         
  29.     select2.length=1;  
    30.  
         
  30.     var ooption = document.createElement("option");   
    31.  
         
  31.     ooption.value = "1";  
    32.  
         
  32.     ooption.innerHTML="苹果";  
    33.  
         
  33.     select2.appendChild(ooption);  
    34.  
         
  34.     ooption = document.createElement("option");   
    35.  
         
  35.     ooption.value = "2";  
    36.  
         
  36.     ooption.innerHTML="芒果";  
    37.  
         
  37.     select2.appendChild(ooption);  
    38.  
         
  38. }  
    39.  
         
  39. else if(select1.value=="3"){  
    40.  
         
  40.     select2.length=1;  
    41.  
         
  41.     var ooption = document.createElement("option");   
    42.  
         
  42.     ooption.value = "1";  
    43.  
         
  43.     ooption.innerHTML="羊肉";  
    44.  
         
  44.     select2.appendChild(ooption);  
    45.  
         
  45.     ooption = document.createElement("option");   
    46.  
         
  46.     ooption.value = "2";  
    47.  
         
  47.     ooption.innerHTML="牛肉";  
    48.  
         
  48.     select2.appendChild(ooption);  
    49.  
         
  49. }  
    50.  
         
  50. else{  
    51.  
         
  51.     select2.length=1;  
    52.  
         
  52. }  
    53.  
         
  53.  
    54.  
         
  54. </script> 
    55.  
         
  55. </body> 
    56.  
         
  56. </html> 
    57.