我们在注册的时候经常会遇到二级联动的下拉菜单,我们一省、市为例学习。如图
<!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>选择省事</title>
<script type="text/javascript">
function sel(oSelNode){
//下面二维数组中的数据以后可以从后台读取,这里直接赋值了
var collCities =[
['选择城市'],
['海淀区','东城区','西城区','朝阳区'],
['益阳','长沙','株洲','湘潭'],
['杭州','宁波','金华','温州'],
['南昌','九江','萍乡','上饶']
];
// selectedIndex 设置或获取选中选项位于 select 对象中的位置。
var idx = oSelNode.selectedIndex;
//把 对应的市区拿出来
var arr = collCities[idx];
// 再把 这个设置到 选择框中去,先要把前面加进去的删除掉
var oSelNode2 = document.getElementById("pSe2");
//先: 清空原二级下拉菜单中的选项
//法1: 该方式要注意,集合中的数据是动态变化的,因此序号i不要++,,永远删第1行,因为删除之后后续的行会依次往上上来
for(var i=1; i<oSelNode2.options.length; ){ //此处不能i++
oSelNode2.removeChild(oSelNode2.options[i]);
}
for(var i=0;i<arr.length;i++){
//创建元素
var OpNode = document.createElement("option");
OpNode.innerHTML=arr[i];
//加到复选框中去
oSelNode2.appendChild(OpNode);
}
}
</script>
</head>
<body>
<select id="pSel" onchange="sel(this)">
<option>选择省市</option>
<option>北京</option>
<option>湖南</option>
<option>浙江</option>
<option>江西</option>
</select>
<select id="pSe2">
<option>选择市区</option>
</select>
</body>
</html>
演示创建表格实现自动 添加附件和删除附件功能
<!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>Insert title here</title>
<style type="text/css">
td{
border: 1px red solid;
width: 200px;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<td colspan="2" onclick="addFile(this)">添加附件</td>
</tr>
<tr>
<td><input type="file"></td>
<td><a href="javascript:void(0);" onclick="delFile(this);">删除附件</a></td>
</tr>
</table>
<script type="text/javascript">
function addFile(){
var oTableNode = document.getElementById("table1");
//插入行,insertRow() 在表格中创建新行(tr),并将行添加到 rows 集合中
var oRowNode = oTableNode.insertRow();
//插入单元格 insertCell() 在表格行(tr)中创建新单元格,并将单元格添加到 cells 集合中。
var oCellNode1 = oRowNode.insertCell();
var oCellNode2 = oRowNode.insertCell();
oCellNode1.innerHTML = '<input type="file">';
oCellNode2.innerHTML = '<a href="javascript:void(0);" onclick="delFile(this);">删除附件</a>';
}
function delFile(oANode){
var oTrNode = oANode.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</body>
</html>