DHTML4(select与checkbox应用)
1.checkbox例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取checkbox选中内容</title> <script type="text/javascript"> function sum(){ var inputNodes=document.getElementsByName("notebook"); var sum=0; for(var i=0;i<inputNodes.length;++i) if(inputNodes[i].checked) sum+=parseInt(inputNodes[i].value); var spanNode=document.getElementById("sumMoney"); spanNode.innerHTML="<font size='7' color='red'>"+sum+"</font>"; } function checkAll(index){ //var checkAllNode=document.getElementsByName("checkAll")[index];//不传入index,也可以直接使用 //event.srcElement来完成 var inputNodes=document.getElementsByName("notebook"); for(var i=0;i<inputNodes.length;++i) // inputNodes[i].checked=checkAllNode.checked;//直接赋值为"全选"复选框的状态 inputNodes[i].checked=event.srcElement.checked; } </script> </head> <body> <input type="checkbox" name="checkAll" onclick="checkAll(0)"/>全选<br/> <input type="checkbox" name="notebook" value="4000" />lenovo笔记本:4000元<br/> <input type="checkbox" name="notebook" value="3000" />Dell笔记本:3000元<br/> <input type="checkbox" name="notebook" value="5000" />ASUS笔记本:5000元<br/> <input type="checkbox" name="notebook" value="3500" />Acer笔记本:3500元<br/> <input type="checkbox" name="notebook" value="3500" />Acer笔记本:3500元<br/> <input type="checkbox" name="notebook" value="13500" />Alienware笔记本:13500元<br/> <input type="checkbox" name="checkAll" onclick="checkAll(1)"/>全选<br/> <input type="button" onclick="sum()" value="计算总金额"/><span id="sumMoney"></span> </body> </html>
2.select应用一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select动态效果</title> <script type="text/javascript" src="JS/documentTools.js"></script> <style type="text/css"> #textClass{ background-color:#FC6; width:400px; height:100px; } #selText{ background-color:#CCC; width:200px; } </style> </head> <body> <div id="textClass"> Each prick silk has a goddess in my heart.<br/> 每一个屌丝心中都有一个女神 </div> <br/> <br/> <select id="selID" onchange="change()"> <option value="none">--请选择--</option> <option value="capitalize">首字母大写</option> <option value="uppercase">所有字母大写</option> <option value="lowercase">所有字母小写</option> </select> <br/> <br/> <div id="selText"> 选中的内容:--请选择-- </div> </body> </html> <script type="text/javascript"> function change(){ with(document){ var selectNode=getElementById("selID"); var optionNodes=selectNode.options; var selectValue=optionNodes[selectNode.selectedIndex].value; getElementById("selText").innerHTML="选中的内容:"+selectValue; var divObj=getElementById("textClass") divObj.style.textTransform=selectValue;//直接设置style对象中的样式属性textTransform的值 } } </script>
3.级联select示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>级联选择</title> <script type="text/javascript" src="JS/documentTools.js"></script> <script type="text/javascript"> function selectPro(){ var proCity=[["--选择城市--"],["三门峡","平顶山","周口","驻马店"], ["泰安市","威海市","日照市","滨州市"], ["杭州市","温州市","嘉兴市","绍兴市 "], ["东城区","西城区","海淀区","朝阳区"]]; var selProNode=byID("selPro"); var selCityNode=byID("selCity"); var arrPro=proCity[selProNode.selectedIndex]; //clearAll(selCityNode); selCityNode.options.length=0;//最简单的一种清空方式 for(var i=0;i<arrPro.length;++i){ var optionNode=document.createElement("option"); selCityNode.options.add(optionNode);//或者使用selCityNode.appendChild(optionNode); optionNode.innerText=arrPro[i]; } } /*常规思路:删除元素*/ function clearAll(selCityNode){//下次选省前清空上次对应所有市 var choices=selCityNode.options for(var i=0;i<choices.length;){ //options.length在remove的过程中时刻在变化 //每删除一个,其余元素的索引-1; choices.remove(i);//该方法移除options中指定index元素 //selCityNode.removeChild(choices[i]);//该方法的执行会引起options集合元素索引变化,以及 //options.length变化,两种方法任选一种 } } </script> </head> <body> <select id="selPro" onchange="selectPro()"> <option value="none">--选择省市--</option> <option >河南</option> <option >山东</option> <option >浙江</option> <option >北京</option> </select> <select id="selCity"> <option>--选择城市--</option> </select> </body> </html>
如果再有县等,那么就把县放到一个二维数组,二维数组的第一维和选中的市相对应,然后操作思想和上面相同
关于常规思路清空上次所有的option:
//本想用with语句偷懒,没想到引发bug
with(selCityNode){
if(options.length>1){//除了"选择"option
var length=options.length;//options.length在remove的过程中时刻在变化
//删除的个数(次数:删除length-1次)是不变的
for(var i=1;i<length;++i)
options.remove(1);
}
}
alert("length="+selCityNode.options.length);//3 //测试语句,以上使用with语句后,集合中的引用不能删除成功关于with语句的bug:http://www.neoease.com/javascript-with-statement/
