其他分享
首页 > 其他分享> > jq选择框--选中左侧元素,点击按钮会移动到右侧框

jq选择框--选中左侧元素,点击按钮会移动到右侧框

作者:互联网

---------------------------html-----------------------------

<div class="main">
  <div class="left">
    <select name="leftDemo" multiple="multiple">
      <option value="">蔡徐坤</option>
      <option value="">谢广坤</option>
      <option value="">李小龙</option>
      <option value="">施瓦辛格</option>
    </select>
  </div>
  <div class="center">
    <button class="allyou">>>></button>
    <button class="allzuo"><<<</button>
    <button class="you">></button>
    <button class="zuo"><</button>
  </div>
  <div class="right">
    <select name="rightDemo" multiple="multiple">
    </select>
  </div>
</div>

----------------------------------------jq-------------------------------------

   //将左侧元素全部移到右边

  $('.allyou').click(function(){
    $('.left select option').appendTo('.right select')
  })

  //将右边元素全部移到左边
  $('.allzuo').click(function(){
    $('.right select option').appendTo('.left select')
  })

  //将左侧选中元素移到右边
  $('.you').click(function(){
    $('.left select option:checked').appendTo('.right select')
  })

  //将右侧选中元素移到左边

  $('.zuo').click(function(){
    $('.right select option:checked').appendTo('.left select')
  })

标签:function,right,option,--,jq,appendTo,按钮,click,select
来源: https://www.cnblogs.com/alannero/p/14946754.html