最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

Javascript_15_DOM_select练习

来源:懂视网 责编:小采 时间:2020-11-27 20:26:21
文档

Javascript_15_DOM_select练习

Javascript_15_DOM_select练习:Javascript_15_DOM_select练习<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_select练习</title
推荐度:
导读Javascript_15_DOM_select练习:Javascript_15_DOM_select练习<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_select练习</title

Javascript_15_DOM_select练习

<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>

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

Javascript_15_DOM_select练习

Javascript_15_DOM_select练习:Javascript_15_DOM_select练习<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_select练习</title
推荐度:
标签: js 15 练习
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top