如何實(shí)現(xiàn)JavaScript, select標(biāo)簽元素左右移動(dòng)功能

發(fā)布時(shí)間：2020-07-27 14:27:33 來(lái)源：億速云閱讀：186 作者：小豬欄目：web開發(fā)

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

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

結(jié)果如下

如何實(shí)現(xiàn)JavaScript, select標(biāo)簽元素左右移動(dòng)功能

以上就是關(guān)于如何實(shí)現(xiàn)JavaScript, select標(biāo)簽元素左右移動(dòng)功能的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

如何實(shí)現(xiàn)JavaScript, select標(biāo)簽元素左右移動(dòng)功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽