Javascript_15_DOM_集中練習
12085 ワード
<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>