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]
var op=new Option(text,value); 

      var op=new Option(text,value);

我寫的一個級聯下拉列表:

 
 

代碼如下:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
#d1 { 
    width: 400px; 
    height: 250px; 
    background-color: #FFE4B5; 
    margin: 40px auto; 

#d1_head { 
    color: white; 
    font-size: 20px; 
    font-family: "Arial"; 
    height: 24px; 
    background-color: bule; 

#d1_content { 
    padding-left: 30px; 
    padding-top: 30px; 

</style> 
<script src="prototype-1.6.0.3.js"></script> 
<script type="text/javascript"> 
    function doAction(index) { 
        var arr = new Array; 
        arr[0] = [ new Option('–研究方向–', '-1') ]; 
        arr[1] = [ new Option('商務英語', 'english1'), 
                new Option('英美文學', 'english2') ]; 
        arr[2] = [ new Option('網格計算', 'computer1'), 
                new Option('計算機軟件', 'computer2'), 
                new Option('圖形計算', 'computer3') ]; 
        $('s2').innerHTML = ''; 
        for (i = 0; i < arr[index].length; i++) { 
            $('s2').options[i] = arr[index][i]; 
        } 
    } 
</script> 
</head> 
<body style="font-size:30px;"> 
    <p id="d1"> 
        <p id="d1_head">專業選擇</p> 
        <p id="d1_content"> 
            <form> 
                <select naem="s1" id="s1" style="width:120px;" 
                    onchange="doAction(this.selectedIndex);"> 
                    <option value="-1">–專業–</option> 
                    <option value="english">–英語–</option> 
                    <option value="computer">–計算機–</option> 
                </select> <select name="s2" id="s2" style="width:120px;"> 
                    <option value="-1">–研究方向–</option> 
                </select> <input type="submit" value="確認" /> 
 
            </form> 
 
        </p> 
    </p> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#d1 {
 width: 400px;
 height: 250px;
 background-color: #FFE4B5;
 margin: 40px auto;
}
#d1_head {
 color: white;
 font-size: 20px;
 font-family: "Arial";
 height: 24px;
 background-color: bule;
}
#d1_content {
 padding-left: 30px;
 padding-top: 30px;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
 function doAction(index) {
  var arr = new Array;
  arr[0] = [ new Option('–研究方向–', '-1') ];
  arr[1] = [ new Option('商務英語', 'english1'),
    new Option('英美文學', 'english2') ];
  arr[2] = [ new Option('網格計算', 'computer1'),
    new Option('計算機軟件', 'computer2'),
    new Option('圖形計算', 'computer3') ];
  $('s2').innerHTML = '';
  for (i = 0; i < arr[index].length; i++) {
   $('s2').options[i] = arr[index][i];
  }
 }
</script>
</head>
<body style="font-size:30px;">
 <p id="d1">
  <p id="d1_head">專業選擇</p>
  <p id="d1_content">
   <form>
    <select naem="s1" id="s1" style="width:120px;"
     onchange="doAction(this.selectedIndex);">
     <option value="-1">–專業–</option>
     <option value="english">–英語–</option>
     <option value="computer">–計算機–</option>
    </select> <select name="s2" id="s2" style="width:120px;">
     <option value="-1">–研究方向–</option>
    </select> <input type="submit" value="確認" />

   </form>

  </p>
 </p>
</body>
</html>

 

發佈留言