<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_select练习</title> <style type="text/css"> a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } table{ color:white; font-weight: bold; border: #008FF0 dashed 1px; } table th{ border: #008FF0 dashed 1px; background-color: grey; } table td{ border: #008FF0 dashed 1px; } .div_class{ height:50px; width:50px; float:left; margin-right:30px; } #div_id_text{ clear:left; margin-top:20px; } </style> </head> <body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：单击按钮添加附件，删除附件 思路：将按钮封装到行里面，变成增加行，删除行对象 */ <script type="text/javascript"> function addFile_1(){ /* * <!--tr> <td><input type="file" /> </td> <td><a href="javascript:void(0)">删除附件</a></td> </tr--> * 将文件选取框定义在行对象中的单元格Td * 删除按钮也定义在单元格Td * 所以只要给表格创建新的行和单元格即可。 */ var oTab= document.getElementById("tab_id_1"); var oTr= oTab.insertRow(); var oTd_file = oTr.insertCell(); var oTd_del = oTr.insertCell(); oTd_file.innerHTML = "<input type='file' />"; oTd_del.innerHTML = "<a href='javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";// oTd_del.innerHTML = "<img src='1.jpg' alt='删除附件' onclick='deleteFile(this)' />"; } function deleteFile(oA){ //a父节点是td，td的父节点才是tr var oTr = oA.parentNode.parentNode; oTr.parentNode.removeChild(oTr); } </script> <table id="tab_id_1"> <tr> <td><a href="javascript:void(0)" onclick="addFile_1()">添加附件</a></td> </tr> <!--tr> <td><input type="file" /> </td> <td><a href="javascript:void(0)">删除附件</a></td> </tr--> </table>＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* *需求： 实现二级联动菜单 */ <script type="text/javascript"> function selectCharacter_3(){ var arr_1=['林黛玉','史湘云','薛宝钗','妙玉']; var arr_2=["诸葛亮","刘备","周瑜","孙权"]; var arr_3=['林冲','鲁智深','武松','李逵']; var arr_4=['唐僧','孙悟空','猪八戒','沙和尚']; var collStory = {"选择名著":['选择人物'] ,"红楼梦":arr_1 ,"三国演义":arr_2 ,"水浒传":arr_3 ,"西游记":arr_4}; //获取两个下拉菜单对象。 var oSelect_3 = document.getElementById("select_id_3"); var oSelect_4 = document.getElementById("select_id_4"); //获取到底选择的是哪部名著。 var index = oSelect_3.selectedIndex; var name=oSelect_3.options[index].innerHTML; //将子菜单中的内容清空一下。 oSelect_4.length = 0;//下面这种方法也可以 /* for(var x=0;x<oSelect_4.options.length; ){ oSelect_4.removeChild(oSelect_4.options[x]); }*/ //通过键(名字)到容器去获取对应的人物数组。 var arr = collStory[name]; //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中 for(var x=0; x<arr.length; x++){ var oOption = document.createElement("option"); oOption.innerHTML = arr[x]; oSelect_4.appendChild(oOption); } } function selectCharacter_2(){ //var arr_1=["诸葛亮","刘备","周瑜","孙权"]; var collStory = {"选择名著":['选择人物'] ,"红楼梦":['林黛玉','史湘云','薛宝钗','妙玉'] ,"三国演义":["诸葛亮","刘备","周瑜","孙权"] ,"水浒传":['林冲','鲁智深','武松','李逵'] ,"西游记":['唐僧','孙悟空','猪八戒','沙和尚']}; //获取两个下拉菜单对象。 var oSelect_3 = document.getElementById("select_id_3"); var oSelect_4 = document.getElementById("select_id_4"); //获取到底选择的是哪部名著。 var index = oSelect_3.selectedIndex; var name=oSelect_3.options[index].innerHTML; //将子菜单中的内容清空一下。 //oSelect_4.length = 0;//下面这种方法也可以 for(var x=0;x<oSelect_4.options.length; ){ oSelect_4.removeChild(oSelect_4.options[x]); } //通过键(名字)到容器去获取对应的人物数组。 var arr = collStory[name]; //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中 for(var x=0; x<arr.length; x++){ var oOption = document.createElement("option"); oOption.innerHTML = arr[x]; oSelect_4.appendChild(oOption); } } function selectCharacter_1(){ //var arr_1=["诸葛亮","刘备","周瑜","孙权"]; var collStory = {"选择名著":['选择人物'] ,"红楼梦":['林黛玉','史湘云','薛宝钗','妙玉'] ,"三国演义":["诸葛亮","刘备","周瑜","孙权"] ,"水浒传":['林冲','鲁智深','武松','李逵'] ,"西游记":['唐僧','孙悟空','猪八戒','沙和尚']}; //alert(collStory);//返回[object Object] //alert(collStory["三国演义"]);//"诸葛亮","刘备","周瑜","孙权" //alert(collStory["三国演义"].length);//4 //获取两个下拉菜单对象。 var oSelect_3 = document.getElementById("select_id_3"); var oSelect_4 = document.getElementById("select_id_4"); //获取到底选择的是哪部名著。 var index = oSelect_3.selectedIndex; var name=oSelect_3.options[index].innerHTML; //alert(name);//三国演义 //将子菜单中的内容清空一下。 oSelect_4.length = 0;//下面这种方法也可以 /* for(var x=0;x<oSelect_4.options.length; ){ oSelect_4.removeChild(oSelect_4.options[x]); }*/ //通过键(名字)到容器去获取对应的人物数组。 var arr = collStory[name]; //alert(arr==arr_1);//true //alert(arr); //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中 for(var x=0; x<arr.length; x++){ var oOption = document.createElement("option"); oOption.innerHTML = arr[x]; oSelect_4.appendChild(oOption); } } </script> <select id="select_id_3" onchange="selectCharacter_3()"> <option>选择名著</option> <option>红楼梦</option> <option>三国演义</option> <option>水浒传</option> <option>西游记</option> </select> <select id="select_id_4"> <option>选择人物</option> </select> <hr />＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* *需求： 实现二级联动菜单 */<script type="text/javascript"> function selectCity(){ var collCities = [['选择城市'] ,['海淀区','朝阳区','东城区','西城区'] ,['济南','青岛','烟台','威海'] ,['沈阳','大连','鞍山','抚顺'] ,['石家庄','保定','邯郸','廊坊']]; //获取两个下拉菜单对象。 var oSelect_1 = document.getElementById("select_id_1"); var oSelect_2 = document.getElementById("select_id_2"); //获取到底选择的是哪个省。 var index = oSelect_1.selectedIndex; //通过角标到容器去获取对应的城市数组。 var arrCities = collCities[index]; //将子菜单中的内容清空一下。 oSelect_2.length = 0; //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中 for(var x=0; x<arrCities.length; x++){ var oOption = document.createElement("option"); oOption.innerHTML = arrCities[x]; oSelect_2.appendChild(oOption); } } </script> <select id="select_id_1" onchange="selectCity()"> <option>选择省市</option> <option>北京</option> <option>山东</option> <option>辽宁</option> <option>河北</option> </select> <select id="select_id_2"> <option>选择城市</option> </select> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：点击三个DIV区域，让文字分别显示相应的颜色 */ <script type="text/javascript"> function changeColor_1(oDiv){ var colorVal = oDiv.style.backgroundColor; document.getElementById("div_id_text").style.color = colorVal; } </script> <div class="div_class" id="div_id_1" style="background-color:red" onclick="changeColor_1(this)"></div> <div class="div_class" id="div_id_2" style="background-color:green" onclick="changeColor_1(this)"></div> <div class="div_class" id="div_id_3" style="background-color:blue" onclick="changeColor_1(this)"></div> <div id="div_id_text"> <pre>1 林黛玉 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 2 薛宝钗 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 3 贾元春 二十年来辩是谁,榴花开处照宫闱.三春争及初春景?虎兕相逢大梦归. 4 贾探春 才自清明志自高,生于末世运偏消.清明涕泣江边望,千里东风一梦遥. 5 史湘云 富贵又为何?襁褓之间父母违.展眼吊斜辉,湘江水逝楚云飞. 6 妙玉 欲洁何曾洁?云空未必空.可怜金玉质,终陷淖泥中. 7 贾迎春 子系中山狼,得志便猖狂.金闺花柳质,一载赴黄粱. 8 贾惜春 堪破三春景不长,缁衣顿改昔年装.可怜绣户侯门女,独卧青灯古佛旁. 9 王熙凤 凡鸟偏从末世来,都知爱慕此生才.一从二令三人木,哭向金陵事更哀. 10 贾巧姐 势败休云贵,家亡莫论亲.偶因济村妇,巧得遇恩人. 11 李纨 桃李春风结子完,到头谁似一盆兰.如冰水好空相妒,枉与他人作笑谈. 12 秦可卿 情天情海幻情深,情既相逢必主淫,漫言不肖皆出荣,造衅开端实在宁. </pre> </div>＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：选择下拉列表框，让文字分别显示相应的颜色 select对象中的集合options：获取 select 对象中 option 对象的集合。 */ <script type="text/javascript"> function changeColor_3(){ var oSelect = document.getElementsByName("selectColor_b")[0]; //select 对象中的selectedIndex 属性， //设置或获取选中选项位于 select 对象中的位置。 var index=oSelect.selectedIndex; alert(index); var collOption = oSelect.options; var text=collOption[index].innerHTML; //alert(text); var value=collOption[index].value; alert(value); var color_1=collOption[index].style.backgroundColor; alert(color_1); document.getElementById("div_id_text").style.color = color_1; } function changeColor_2(){ var oSelect = document.getElementsByName("selectColor_a")[0]; //获取所有的option。 /*with (oSelect) { var collOption = options; alert(collOption[selectedIndex].innerHTML); }*/ var colorVal = oSelect.options[oSelect.selectedIndex].value; document.getElementById("div_id_text").style.color = colorVal; } </script> <select name="selectColor_a" onchange="changeColor_2()"> <option value="black">选择颜色</option> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <select name="selectColor_b" onchange="changeColor_3()" > <option style="background-color:black" value="black">选择颜色</option> <option style="background-color:red" value="red">红色</option> <option style="background-color:green" value="green">绿色</option> <option style="background-color:blue" value="blue">蓝色</option> </select> </body></html>
