一:左右移动
<html>
<head><h1>选择移动</h1>
<script type="text/javascript">
function move(a,b){
var one=document.getElementById(a);
var two=document.getElementById(b);
for(var i=0;i<one.length;i++){
if(one[i].selected){
var opt=new Option(one[i].text,one[i].value);
two.add(opt);
one.remove(i);
i--;
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td width="107" height="72">
<select size="4" multiple="multiple" id="left">
<option value="01">添加简历</option>
<option value="02">修改简历</option>
<option value="03">查阅简历</option>
<option value="04">删除简历</option>
</select></td>
<td width="65"><input type="button" value=">>" onclick="move('left','c')"/><br/>
<input type="button" value="<<" onclick="move('c','left')"/></td>
<td >
<select size="4" multiple="multiple" id="c">
</select></td>
</tr>
</table>
</body>
</html>
注意: Option 是下拉列表的数组,注意他的两个参数 text,value 或者value,value的值
function move()自定义函数里面传的是下拉列表的id值
二:省市联动
<html>
<head><title>我的省市联动程序</title></head>
<script type="text/javascript">
function changeCity()
{
var province=document.getElementById("selectProvince");
var city=document.getElementById("selectCity");
city.length=1;
var cityList=new Array();
cityList["湖北省"]=["武汉","襄樊","黄石"];
cityList["湖南省"]=["长沙","常德","湘潭"];
var selectValue=province.value;
for(var i in cityList[selectValue])
{
var opt=new Option(cityList[selectValue][i],cityList[selectValue][i])
city.add(opt);
}
}
</script>
<body>
<table align="center" width="300" border="1" height="200">
<tr><td colspan="2">我的省市联动的程序设计</td></tr>
<tr><td>姓名:</td><td><input type="text" id="UserName" value="username"/></td></tr>
<tr><td>省份:</td><td><select name="selectProvince" onchange="changeCity()" id="selectProvince">
<option checked="checked">请您选择省份</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
</select>
</td></tr>
<tr><td>城市:</td><td>
<select name="selectCity" id="selectCity">
</select>
</td></tr>
</table>
</body>
</html>
注意:Option()参数的应用 在这里是Option(cityList[selectValue][i],cityList[selectValue][i])******value,value***
也要注意避免出现所有的城市在一起出现要设置Ctiy.length=1;使得每次都从一开始
三:全选,反选
<html>
<title>我的全选功能</title>
<script type="text/javascript">
function selectAll()
{
var myAll=document.getElementById("checkAll");
var items=document.getElementsByName("item");
for(var i=0; i<items.length; i++)
{
items[i].checked=myAll.checked;
}
}
function reverceAll()
{
var items=document.getElementsByName("item");
for(var i=0; i<items.length; i++)
{
items[i].checked=!items[i].checked;
}
}
</script>
<body>
全选<input type="checkbox" id="checkAll" onclick="selectAll()"/>
反选<input type="checkbox" name="reverceAll" id="reverceAll" value="checkbox"
onclick="reverceAll()"/>
<br/>
选项一<input type="checkbox" name="item" id="item" value="checkbox"/>
<br>
选项二<input type="checkbox" name="item" id="item" value="checkbox"/>
<br/>
选项三<input type="checkbox" name="item" id="item" value="checkbox"/>
<br/>
选项四<input type="checkbox" name="item" id="item" value="checkbox"/>
<br/>
</body>
</html>
注意这三个都要用for语句,要体会他的原理