如何實現(xiàn)JavaScript,select標(biāo)簽元素左右移動功能-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了如何實現(xiàn)JavaScript, select標(biāo)簽元素左右移動功能，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

為輪臺等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及輪臺網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、輪臺網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

通過JavaScript設(shè)計一段代碼,實現(xiàn)下面的功能.初始界面如下圖,選中左面標(biāo)簽中的幾個選項后再點-->,則將他們移動到右側(cè)框內(nèi),同時左側(cè)選項消失.點擊====>后,左側(cè)全部選項移動到右側(cè).點擊右側(cè)幾個選項后,再點<---,則這些選項移動到左側(cè),點<====,則右側(cè)全部選項移動到左側(cè).代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box_L,#choice,#box_R{
      display: inline-block;
    }

  </style>
</head>
<body>
<div id="box_L">
  <select id="left" multiple size="10">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
    <option>five</option>
    <option>six</option>
  </select>
</div>
<div id="choice">
  <input type="button" width="5px" value="--->" onclick="add()"><br>
  <input type="button" width="5px" value="====>" onclick="addall()"><br>
  <input type="butoon" width="5px" value="<---" onclick="sub()"><br>
  <input type="butoon" width="5px" value="<====" onclick="suball()"><br>
</div>
<div id="box_R">
  <select id="right" size="10" multiple>
    <option>seven</option>
  </select>
</div>

<script>
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  function add(){
    var options=left.children;
    for (var i=0;i<options.length;i++){
      if (options[i].selected==true){
        options[i].selected=false;
        right.appendChild(options[i]);
        i--;
      }
    }
  }

  function addall(){
    var options=left.children;
    for (var i=0;i<options.length;i++){
      right.appendChild(options[i]);
      i--;
    }
  }
  function sub(){
    var options=right.children;
    for (var i=0;i<options.length;i++){
      if (options[i].selected==true){
        options[i].selected=false;
        left.appendChild(options[i]);
        i--;
      }
    }
  }
  function suball(){
    var options=right.children;
    for (var i=0;i<options.length;i++){
      left.appendChild(options[i]);
      i--;
    }
  }
</script>
</body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：如何實現(xiàn)JavaScript,select標(biāo)簽元素左右移動功能-創(chuàng)新互聯(lián)
分享路徑：http://www.rwnh.cn/article30/coiiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、外貿(mào)建站、品牌網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

如何實現(xiàn)JavaScript,select標(biāo)簽元素左右移動功能-創(chuàng)新互聯(lián)