<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>DOM_select練習(xí)</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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
* 需求：?jiǎn)螕舭粹o添加附件，刪除附件
思路：將按鈕封裝到行里面，變成增加行，刪除行對(duì)象
*/
<script type="text/javascript">
function addFile_1(){
/*
* <!--tr>
<td><input type="file" /> </td>
<td><a href="javascript:void(0)">刪除附件</a></td>
</tr-->
* 將文件選取框定義在行對(duì)象中的單元格Td
* 刪除按鈕也定義在單元格Td
* 所以只要給表格創(chuàng)建新的行和單元格即可。
*/
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父節(jié)點(diǎn)是td，td的父節(jié)點(diǎn)才是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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
*需求： 實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單
*/
<script type="text/javascript">
function selectCharacter_3(){
var arr_1=['林黛玉','史湘云','薛寶釵','妙玉'];
var arr_2=["諸葛亮","劉備","周瑜","孫權(quán)"];
var arr_3=['林沖','魯智深','武松','李逵'];
var arr_4=['唐僧','孫悟空','豬八戒','沙和尚'];
var collStory = {"選擇名著":['選擇人物']
,"紅樓夢(mèng)":arr_1
,"三國(guó)演義":arr_2
,"水滸傳":arr_3
,"西游記":arr_4};
//獲取兩個(gè)下拉菜單對(duì)象。
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;
//將子菜單中的內(nèi)容清空一下。
oSelect_4.length = 0;//下面這種方法也可以
/*
for(var x=0;x<oSelect_4.options.length; ){
oSelect_4.removeChild(oSelect_4.options[x]);
}*/
//通過(guò)鍵(名字)到容器去獲取對(duì)應(yīng)的人物數(shù)組。
var arr = collStory[name];
//遍歷這個(gè)數(shù)組。并將這個(gè)數(shù)組的元素封裝成option對(duì)象，添加到子菜單中
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=["諸葛亮","劉備","周瑜","孫權(quán)"];
var collStory = {"選擇名著":['選擇人物']
,"紅樓夢(mèng)":['林黛玉','史湘云','薛寶釵','妙玉']
,"三國(guó)演義":["諸葛亮","劉備","周瑜","孫權(quán)"]
,"水滸傳":['林沖','魯智深','武松','李逵']
,"西游記":['唐僧','孫悟空','豬八戒','沙和尚']};
//獲取兩個(gè)下拉菜單對(duì)象。
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;
//將子菜單中的內(nèi)容清空一下。
//oSelect_4.length = 0;//下面這種方法也可以
for(var x=0;x<oSelect_4.options.length; ){
oSelect_4.removeChild(oSelect_4.options[x]);
}
//通過(guò)鍵(名字)到容器去獲取對(duì)應(yīng)的人物數(shù)組。
var arr = collStory[name];
//遍歷這個(gè)數(shù)組。并將這個(gè)數(shù)組的元素封裝成option對(duì)象，添加到子菜單中
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=["諸葛亮","劉備","周瑜","孫權(quán)"];
var collStory = {"選擇名著":['選擇人物']
,"紅樓夢(mèng)":['林黛玉','史湘云','薛寶釵','妙玉']
,"三國(guó)演義":["諸葛亮","劉備","周瑜","孫權(quán)"]
,"水滸傳":['林沖','魯智深','武松','李逵']
,"西游記":['唐僧','孫悟空','豬八戒','沙和尚']};
//alert(collStory);//返回[object Object]
//alert(collStory["三國(guó)演義"]);//"諸葛亮","劉備","周瑜","孫權(quán)"
//alert(collStory["三國(guó)演義"].length);//4
//獲取兩個(gè)下拉菜單對(duì)象。
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);//三國(guó)演義
//將子菜單中的內(nèi)容清空一下。
oSelect_4.length = 0;//下面這種方法也可以
/*
for(var x=0;x<oSelect_4.options.length; ){
oSelect_4.removeChild(oSelect_4.options[x]);
}*/
//通過(guò)鍵(名字)到容器去獲取對(duì)應(yīng)的人物數(shù)組。
var arr = collStory[name];
//alert(arr==arr_1);//true
//alert(arr);
//遍歷這個(gè)數(shù)組。并將這個(gè)數(shù)組的元素封裝成option對(duì)象，添加到子菜單中
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>紅樓夢(mèng)</option>
<option>三國(guó)演義</option>
<option>水滸傳</option>
<option>西游記</option>
</select>
<select id="select_id_4">
<option>選擇人物</option>
</select>
<hr />
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
*需求： 實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單
*/
<script type="text/javascript">
function selectCity(){
var collCities = [['選擇城市']
,['海淀區(qū)','朝陽(yáng)區(qū)','東城區(qū)','西城區(qū)']
,['濟(jì)南','青島','煙臺(tái)','威海']
,['沈陽(yáng)','大連','鞍山','撫順']
,['石家莊','保定','邯鄲','廊坊']];
//獲取兩個(gè)下拉菜單對(duì)象。
var oSelect_1 = document.getElementById("select_id_1");
var oSelect_2 = document.getElementById("select_id_2");
//獲取到底選擇的是哪個(gè)省。
var index = oSelect_1.selectedIndex;
//通過(guò)角標(biāo)到容器去獲取對(duì)應(yīng)的城市數(shù)組。
var arrCities = collCities[index];
//將子菜單中的內(nèi)容清空一下。
oSelect_2.length = 0;
//遍歷這個(gè)數(shù)組。并將這個(gè)數(shù)組的元素封裝成option對(duì)象，添加到子菜單中
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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
* 需求：點(diǎn)擊三個(gè)DIV區(qū)域，讓文字分別顯示相應(yīng)的顏色
*/
<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 林黛玉 可嘆停機(jī)德,堪憐永絮才.玉帶林中掛,金簪雪里埋.
2 薛寶釵 可嘆停機(jī)德,堪憐永絮才.玉帶林中掛,金簪雪里埋.
3 賈元春 二十年來(lái)辯是誰(shuí),榴花開(kāi)處照宮闈.三春爭(zhēng)及初春景?虎兕相逢大夢(mèng)歸.
4 賈探春 才自清明志自高,生于末世運(yùn)偏消.清明涕泣江邊望,千里東風(fēng)一夢(mèng)遙.
5 史湘云 富貴又為何?襁褓之間父母違.展眼吊斜輝,湘江水逝楚云飛.
6 妙玉 欲潔何曾潔?云空未必空.可憐金玉質(zhì),終陷淖泥中.
7 賈迎春 子系中山狼,得志便猖狂.金閨花柳質(zhì),一載赴黃粱.
8 賈惜春 堪破三春景不長(zhǎng),緇衣頓改昔年裝.可憐繡戶侯門(mén)女,獨(dú)臥青燈古佛旁.
9 王熙鳳 凡鳥(niǎo)偏從末世來(lái),都知愛(ài)慕此生才.一從二令三人木,哭向金陵事更哀.
10 賈巧姐 勢(shì)敗休云貴,家亡莫論親.偶因濟(jì)村婦,巧得遇恩人.
11 李紈 桃李春風(fēng)結(jié)子完,到頭誰(shuí)似一盆蘭.如冰水好空相妒,枉與他人作笑談.
12 秦可卿 情天情海幻情深,情既相逢必主淫,漫言不肖皆出榮,造釁開(kāi)端實(shí)在寧.
</pre>
</div>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
* 需求：選擇下拉列表框，讓文字分別顯示相應(yīng)的顏色
select對(duì)象中的集合options：獲取 select 對(duì)象中 option 對(duì)象的集合。
*/
<script type="text/javascript">
function changeColor_3(){
var oSelect = document.getElementsByName("selectColor_b")[0];
//select 對(duì)象中的selectedIndex 屬性，
//設(shè)置或獲取選中選項(xiàng)位于 select 對(duì)象中的位置。
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">藍(lán)色</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">藍(lán)色</option>
</select>
</body>
</html>聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
