javascript中级联下拉列表

Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作。
1,Select对象。

 属性

  a,selectedIndex:用户选择的选项的下标,下标从0开始

  b,length:    获取或者设置选项的个数
  c,options:   返回一个数组,数组元素是Option对象
 2,Options对象

 属性:

a,text:选项的文本内容

 b,value:选项的値

 c,selected:  当该选项被选上,值为true,否则为false

 小知识:创建一个Option对象

[html] view plain copy
  1. var op=new Option(text,value);  

 

我写的一个级联下拉列表:

javascript中级联下拉列表

代码如下:

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #d1 {  
  6.     width: 400px;  
  7.     height: 250px;  
  8.     background-color: #FFE4B5;  
  9.     margin: 40px auto;  
  10. }  
  11. #d1_head {  
  12.     color: white;  
  13.     font-size: 20px;  
  14.     font-family: "Arial";  
  15.     height: 24px;  
  16.     background-color: bule;  
  17. }  
  18. #d1_content {  
  19.     padding-left: 30px;  
  20.     padding-top: 30px;  
  21. }  
  22. </style>  
  23. <script src="prototype-1.6.0.3.js"></script>  
  24. <script type="text/javascript">  
  25.     function doAction(index) {  
  26.         var arr = new Array;  
  27.         arr[0] = [ new Option('--研究方向--', '-1') ];  
  28.         arr[1] = [ new Option('商务英语', 'english1'),  
  29.                 new Option('英美文学', 'english2') ];  
  30.         arr[2] = [ new Option('网格计算', 'computer1'),  
  31.                 new Option('计算机软件', 'computer2'),  
  32.                 new Option('图形计算', 'computer3') ];  
  33.         $('s2').innerHTML = '';  
  34.         for (i = 0; i < arr[index].length; i++) {  
  35.             $('s2').options[i] = arr[index][i];  
  36.         }  
  37.     }  
  38. </script>  
  39. </head>  
  40. <body style="font-size:30px;">  
  41.     <div id="d1">  
  42.         <div id="d1_head">专业选择</div>  
  43.         <div id="d1_content">  
  44.             <form>  
  45.                 <select naem="s1" id="s1" style="width:120px;"  
  46.                     onchange="doAction(this.selectedIndex);">  
  47.                     <option value="-1">--专业--</option>  
  48.                     <option value="english">--英语--</option>  
  49.                     <option value="computer">--计算机--</option>  
  50.                 </select> <select name="s2" id="s2" style="width:120px;">  
  51.                     <option value="-1">--研究方向--</option>  
  52.                 </select> <input type="submit" value="确认" />  
  53.   
  54.             </form>  
  55.   
  56.         </div>  
  57.     </div>  
  58. </body>  
  59. </html> 

你可能感兴趣的:(html,浏览器)