Angular6中左右两个option进行单选和多选项的转移

其中htm代码如下:

 <form action="" >
        <div class="roleCheckbox">
          <span>角色:</span>
          <label for="checkBox"><input type="checkbox" class="checkAll" (click)="checkAll()">全选</label>
          <label for="checkBox"><input type="checkbox" class="discheckAll" (click)="discheckAll()"> 全否</label>
        </div>
        <div class="roleAssignment_parts">
          <div class="role_parts">角色分配:</div>
          <select name="" id="sel1" multiple="multiple" >
              <option value={{item.id}} *ngFor="let item of notMaRoleData" status="item.id">{{item.roleName}}</option>
          </select>
          <div class="ctr-Btn">
            <input type="button" value=">>>" class="fl contrl_btn1">
            <input type="button" value=">" class="fl contrl_btn2" (click)="Toright()">
            <input type="button" value="<<<" class="fl contrl_btn3">
            <input type="button" value="<" class="fl contrl_btn4" (click)="Toleft()">
          </div>
          <select name="item" id="sel2" multiple="multiple">
            <option value={{item.id}} *ngFor="let item of maRoleData"  status="item.id">{{item.roleName}}</option>
          </select>
        </div>
        <div class="setUserOperate">
          <button class="pressBtn btn-save" (click)="save()" >保存</button>
          <button class="pressBtn btn-back" (click)="cancel()">取消</button>
        </div>
</form>

ts代码,其中引用了jquery

 // 单个>点击右移
  Toright(){
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var optArr = sel1.children;
    for(var i=optArr.length-1;i>=0;i--){
        if(optArr[i]["selected"]==true){
            optArr[i]["selected"]=false;
            sel2.appendChild(optArr[i]);
        }
    }
  }
  // 单个< 左移
  Toleft(){
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var optArr = sel2.children;
    for(var i=optArr.length-1;i>=0;i--){
      if(optArr[i]["selected"]==true){
          optArr[i]["selected"]=false;
          sel1.appendChild(optArr[i]);
      }
    }
  }

建立一个新的数组,把所有需要提交的数据放到一个数组中,再转化成后台需要的数据格式。

在两个option之间有<和<<是一个或者多个向左移动,>和>>是一个或者多个向右移动,代码如下:

 // 角色分配
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    // 全部向右转移
    $(".ctr-Btn .contrl_btn1").click(function () {
    var optArr = sel1.children;
      for(var i=0;i<optArr.length;){
          sel2.appendChild(optArr[i]);
      }
    })
    // 全部向左转移
    $(".ctr-Btn .contrl_btn3").click(function () {
      var optArr = sel2.children;
      for(var i=0;i<optArr.length;){
          sel1.appendChild(optArr[i]);
      }
    })

上方可以设置两个按钮,进行全选全否设置,代码如下:

 // 全选
  checkAll(){
    $(".checkAll").prop("checked",'checked');
    $('#sel1 option').prop("selected",'selected');
    $(".discheckAll").prop("checked",'');

  }
  // 全否选
  discheckAll(){
    $(".discheckAll").prop("checked",'checked');
    $('#sel1 option').prop("selected",'');
    $(".checkAll").prop("checked",'');
  }

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值