jquery实现select的选中的option全部从左移到右边，从右移到左边

「已注销」

于 2021-02-28 14:38:00 发布

阅读量208

点赞数

文章标签： jquery 前端 servlet java javascript

本文链接：https://blog.csdn.net/CSDN_KONGlX/article/details/125489806

版权

1.效果截图

2jsp代码以及jquery实现(全部移动，juqery只需要两行代码实现，方法中加粗标红的两行，先取得选中的option集合，再append即可)。

        <form role="form" class="form-inline">
                  <div class="form-group">
                    <label for="exampleInputPassword1">未分配角色列表</label><br>
                    <select id="leftList" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
                      <c:forEach items="${leftRoleList }" var="role">
                          <option value="${role.id }">${role.name }</option>
                      </c:forEach>
                    </select>
                  </div>
                  <div class="form-group">
                        <ul>
                            <li id="toRight" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                            <br>
                            <li id="toLeft" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
                        </ul>
                  </div>
                  <div class="form-group" style="margin-left:40px;">
                    <label for="exampleInputPassword1">已分配角色列表</label><br>
                    <select id="rightList" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
                      <c:forEach items="${rightRoleList}" var="role">
                          <option value="${role.id }">${role.name }</option>
                      </c:forEach>
                    </select>
                  </div>
                </form>

//分配角色
      $("#toRight").click(function(){
          var leftList = $("#leftList option:selected");//取得选中的option
          if(leftList.length <=0){
              layer.msg("请选择要分配的角色", {time:1000, icon:6, shift:6});
              return false;
          }
          var jsonData =new Array();
          $.each(leftList,function(i,n){
              jsonData.push({"id":"${id}","roleId":n.value});
          });
          $.ajax({
              type:"POST",
              contentType : 'application/json;charset=utf-8', //设置请求头信息
              dataType:"json",
              url:"${CWF_PATH}/user/doAjaxAddRole.do",
              data:JSON.stringify(jsonData),
              beforeSend:function(){
                  return true;
              },success:function(data){
                  if(data.success){
                      $("#rightList").append(leftList);
                      layer.msg("分配角色成功", {time:1000, icon:6, shift:6});    
                  }else{
                      layer.msg(data.message, {time:1000, icon:6, shift:6});
                  }
              },error:function(){
                  layer.msg("分配角色成功异常", {time:1000, icon:6, shift:6});
              }                   
          });

      });
          
       //取消角色
       $("#toLeft").click(function(){
           var rightList = $("#rightList option:selected");//取得选中的option
           if(rightList.length <=0){
               layer.msg("请选择要取消的角色", {time:1000, icon:6, shift:6});
               return false;
           }
           var jsonData =new Array();
           $.each(rightList,function(i,n){
               jsonData.push({"id":"${id}","roleId":n.value});
           });
           $.ajax({
               type:"POST",
               contentType : 'application/json;charset=utf-8', //设置请求头信息
               dataType:"json",
               url:"${CWF_PATH}/user/doAjaxDeleteRole.do",
               data:JSON.stringify(jsonData),
               beforeSend:function(){
                   return true;
               },success:function(data){
                   if(data.success){
                       $("#leftList").append(rightList.clone());
                       rightList.remove();
                       layer.msg("取消角色成功", {time:1000, icon:6, shift:6});    
                   }else{
                       layer.msg(data.message, {time:1000, icon:6, shift:6});
                   }
               },error:function(){
                   layer.msg("取消角色成功异常", {time:1000, icon:6, shift:6});
               }                   
           });
       });