04.20 js 左右移動，全選反選，省市聯動入門應用

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一：左右移動

<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語句，要體會他的原理

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

04.20 js 左右移動，全選反選，省市聯動入門應用

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support