html dom 级联处理为处理完

最新推荐文章于 2024-10-14 11:41:51 发布

原创最新推荐文章于 2024-10-14 11:41:51 发布 · 618 阅读

CC 4.0 BY-SA版权

本文详细介绍了HTMLDOM在W3C规范之前的下拉列表（Select）和选项（Option）的基本操作，包括选项的选择、长度获取、创建新选项及级联下拉列表的实现。

html dom指的是在w3c的dom规范出现之前，各个浏览器支持的一些dom操作。
1) Select对象
属性
a. selectedIndex: 用户选择的选项的下标,下标从0开始。
b. length: 获取戒者设置选项的个数。
c. options: 返回一个数组，数组元素是Option对象。
2) Option对象
属性
a. text: 选项的文本内容
b. value: 选项的值
c. selected: 当该选项被选上，值为true,否则为false。

小知识：创建一个Option对象。 var op = new Option(text,value);

3) Table
4) TableRow
5) TableCell

2.1. Select，option的使用

 下标从0开始

JS小知识点传入参数，效果一样，this表示所绑定的那个对象（即select对象）

对演示2的简化

演示4
length属性获取或者设置选项的个数

演示5
options属性输出select对象的所有option选项

增加option选项

【案例4】html dom中 select,option的使用

<html>
    <!--html dom中 select,option的使用--> 
      <head>
          <script src="prototype-1.6.0.3.js"></script>
          <script>

             function doAction(index){
            //alert($('city').selectedIndex); 
            //alert(obj.selectedIndex); 
            //alert(index);
         } 
          function f2(){ 
                //alert($('city').length);
                //$('city').length = 3;
                //* var arr = $('city').options;
                for(i=0;i<arr.length;i++){ 
                     alert(arr[i].text + ':' + arr[i].value);
                    }  */ 
                var op = new Option('大连','dl');
                $('city').options[$('city').length] = op;
            } 
</script> 
</head> 
    <body style="font-size:30px;">
        <select name="city" id="city" style="width:120px;"
                               onchange="doAction(this.selectedIndex);">
       <option value="cd">成都</option>
       <option value="qd">青岛</option> 
       <option value="xm">厦门</option>
       </select> <input type="button" value="点我吧" onclick="f2();"/>
 </body> 
</html>

2.2. 案例级联下拉列表

<html>

         <!--级联下拉列表-->

   <head>

       <style>

          #d1{

              width:450px;

              height:120px;

              background-color:#dddddd;

              margin:40px auto;

         #d1_head{

              height:30px;

              font-size:24px;

              color:white;

              background-color:blue;

         #d1_content{

              padding-left:30px; }

    </style>

    <script src="prototype-1.6.0.3.js"></script>

    <script>

          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').length = 0; $('s2').innerHTML = '';

           for(i=0;i<arr[index].length;i++){

               $('s2').options[i] = arr[index][i];

}

    </script>

     </head>

      <body style="font-size:30px;">

              <div id="d1"> <div id="d1_head">专业选择</div>

              <div id="d1_content">

                   <form>

                   <select name="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>

 </div>

</div>

 </body>

</html>

html dom 级联处理 为处理完

html dom 级联处理为处理完