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>
以上就是javascript_15_dom_select练习的内容。