DOM——有关组合框组件——下拉菜单select用法演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM——有关组合框组件——下拉菜单select用法演示</title>
<style type="text/css">
.clrclass{
width:50px;
height:50px;
float:left;
margin-right: 30px;
#text{
clear:left;
}
}
</style>
<script type="text/javascript">
function changeColor(oDiv){
var objText=document.getElementById("text");
//把oDiv的背景色取出来,赋给oDivText.style.color
var clr=oDiv.style.backgroundColor;
objText.style.color=clr;
/*技术延伸: 这里演示的是更改oDivText对象的style.color属性
如果要切换图片,只要更改oImg对象的"src"属性就可以。
其它dom对象的其它属性,举一反三。 */
}
</script>
</head>
<body>
<h3>select组件用法演示</h3>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
显示效果的文字<br/>
显示效果的文字<br/>
显示效果的文字<br/>
</div>
</body>
</html>
版本2
演示一下select组件的常用用法:
options集合: 获取 select 对象中 option 对象的集合。
selectedIndex属性: 选中选项位于 select 对象中的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM——有关组合框组件——下拉菜单的演示</title>
<style type="text/css">
#text {
margin: 20px;
}
</style>
<script type="text/javascript">
function demo(){
var oSelect = document.getElementsByName("selectColor")[0];
var val=oSelect.value;
alert("1: "+val);
/*演示一下select组件的常用用法
* options集合: 获取 select 对象中 option 对象的集合。
selectedIndex属性: 选中选项位于 select 对象中的位置。
*/
//遍历所有选项
var arr=oSelect.options;
for(var x=0;x<arr.length;x++){
var oOption=arr[x];
alert(oOption.value);
}
alert("2:" +arr[oSelect.selectedIndex].value );//select组件的当前值---法2
}
function changeColor(oSelect){
var val=oSelect.value;
document.getElementById("text").style.color=val;
}
</script>
</head>
<body>
<h3>select组件用法演示</h3>
<button onclick="demo();">select组件常用用法演示</button>
<br/>
<select name="selectColor" onchange="changeColor(this)">
<option value="black">--选择颜色--</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<select name="selectColor2" style="width:50px;" onchange="changeColor(this)">
<option value="black" style="background-color:black"></option>
<option value="red" style="background-color:red"></option>
<option value="green" style="background-color:green"></option>
<option value="blue" style="background-color:blue"></option>
</select>
<div id="text">
显示效果的文字
<br/>
显示效果的文字
<br/>
显示效果的文字
<br/>
</div>
<hr/>
</body>
</html>
select组件用法演示--二级下拉菜单联动
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关组合框组件--下拦菜单的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
select{
width:100px;
}
</style>
<script type="text/javascript">
//我们以后正式开发时,省份和城市数据来自后台,现在讲解纯前端技术,直接赋值一些常量数据
//1城市数据为arr
function changeCity1(oSelect){
var collCities = [['选择城市'], ['朝阳区', '海淀区', '东城区', '西城区'], ['益阳', '长沙', '株洲', '常德'], ['杭州', '宁波', '金华', '温州'], ['南昌', '九江', '萍乡', '上饶']];
var idx = oSelect.selectedIndex;
var arrCities = collCities[idx];
//alert(arrCities);
var oSelCity = document.getElementsByName("selCity")[0];
//alert(oSelCity.name);
//先清除旧的城市选项
/*法1 ---注意,oSelCity.options.length是动态变化的
for(var x=1;x<oSelCity.options.length;){
oSelCity.removeChild( oSelCity.options[x] );
}
*/
//法2
oSelCity.length=1; //直接把组件的选项集合长度设为1,相当于实现删除其余选项的效果
//再添加当前省份的城市选项: <option value="">...</option>
for(var x=0; x<arrCities.length; x++){
var oOption = document.createElement("option");
oOption.innerHTML=arrCities[x];
//oOption.value=...
oSelCity.appendChild(oOption);
}
}
</script>
</head>
<body>
<h3>select组件用法演示--二级下拉菜单联动</h3>
<select name="selProv" onchange="changeCity1(this);">
<option value="none">--选择省份--</option>
<option value="beijing">北京</option>
<option value="hunan">湖南</option>
<option value="zhejiang">浙江</option>
<option value="jiangxi">江西</option>
</select>
<select name="selCity">
<option value="none">选择城市</option>
</select>
</body>
</html>
DOM--动态表单(以添加附件为例)技术的演示
<!DOCTYPE html>
<html>
<head>
<title>DOM--动态表单(以添加附件为例)技术的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table a:link, table a:visited{
text-decoration:none;
color:#8000ff;
}
table a:hover{
color:#ffff80;
}
</style>
<script type="text/javascript">
function addFile(){
var oTabNode = document.getElementById("tab1");
var oTrNode = oTabNode.insertRow();
var oTdNode1 = oTrNode.insertCell();
oTdNode1.innerHTML="<input type='file' name='pics'/>";
var oTdNode2 = oTrNode.insertCell();
//oTdNode2.innerHTML="<a href='javascript:delFile(this)'>删除附件</a>" //bug: 这种方式delFile(this)中的实参this是无效的
oTdNode2.innerHTML="<a href='javascript:void(0)' onclick='delFile(this)'>删除附件</a>"
}
function delFile(aNode){
//alert("11:"+aNode.nodeName);
var oTrNode = aNode.parentNode.parentNode;
//alert(oTrNode.nodeName);
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</head>
<body>
<h3>DOM--动态表单(以添加附件为例)技术的演示</h3>
<table id="tab1">
<tr>
<td><a href="javascript:addFile()">添加附件</a></td>
</tr>
<!--由addFile()动态创建下面<tr>中的内容
<tr>
<td><input type="file" name="pics"/></td>
<td><a href="javascript:delFile(this)">删除附件</a></td>
</tr>
-->
</table>
</body>
</html>