04.20 js 左右移动，全选反选，省市联动入门应用

来源：互联网发布：java swing详细教程编辑：程序博客网时间：2024/04/29 21:56

一：左右移动

<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语句，要体会他的原理