html dom 级联处理为处理完

最新推荐文章于 2023-11-10 11:14:36 发布

luyuncsd123

最新推荐文章于 2023-11-10 11:14:36 发布

阅读量578

点赞数

本文链接：https://blog.csdn.net/luyuncsd123/article/details/8225290

版权

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;"
                               οnchange="doAction(this.selectedIndex);">
       <option value="cd">成都</option>
       <option value="qd">青岛</option> 
       <option value="xm">厦门</option>
       </select> <input type="button" value="点我吧" οnclick="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;" 
                        οnchange="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>