二级

来源:互联网 发布:jquery.json.js cdn 编辑:程序博客网 时间:2024/04/25 14:27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="Center/conn.asp"-->
<html>
<head>
<title>我的二级连动</title>
</head>
<body>
<table id="detail" onload="init();">
 <tr>
  <td>
   <select name="bidkinds" onchange="select_change(smallkinds);" id="sel">
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
   </select><select name="smallkinds">
    <option value="0101">0101</option>
    <option value="0102">0102</option>
    <option value="0103">0103</option>
    <option value="0201">0201</option>
    <option value="0202">0202</option>
    <option value="0203">0203</option>
    <option value="0301">0301</option>
    <option value="0302">0302</option>
    <option value="0303">0303</option>
   </select>
   <input type="button" name="but1" value="sub">
   <!--<select name="smalinds">
   <option value="a">a</option>
  </td>
 
 </tr>
</table>
</body>
</html>
<script type="text/javascript">
//先声明一个数组再把小类放到smallkinds数组中。
var smallkinds =new Array();
function init(){
  var _tb = document.getElementById("detail").rows(0).cells(0);
  var ops =_tb.children(1).options;
  for(var i=0;i<ops.length;i++){
   smallkinds.push(ops[i]);
  }
  //初始化时,触发onchange事件
  _tb.children(0).fireEvent("onchange");
}

function select_change(optns){
                                  //for(var i=0; i<optns.length; i++)
                                  // {alert(optns[i].value)}
    var obj = event.srcElement;    //大类bidkinds 对象
                                    //alert(obj(1).value); 2
    var target = obj.nextSibling;  //下一节点。也就是小类节点
                                   // var sel=document.getElementById("sel");
                                   //alert(sel.nextSibling.nodeName); //如果<select>与</select>之间有空格,它的下一节点就是#text
    var parents = obj.parentElement;  //父节点 td
    var childrens = parents.children; //父节点的children 也就是有select
                                         // alert(parents.nodeName); td  alert(parents.children.length) 2,3;
    for(var i=0;i<childrens.length;i++){
      if(childrens[i].name==obj.name){   //判断bidkinds对象和childrens[i]相等,得到i,把childrens[i+1] 赋给target
            target = childrens[i+1];
            break;
        }
    }
    //上面主要目的是为了让target.length=0;
   target.length = 0;  
   for(var i=0;i<optns.length;i++) {
        var o = optns[i];
        if(o.value.substring(0,2) == obj.value.substring(0,2)) {
            target.add(new Option(o.text,o.value));
        }
    }

}
init();
</script>

原创粉丝点击