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

最新推荐文章于 2024-01-09 09:34:20 发布

原创最新推荐文章于 2024-01-09 09:34:20 发布 · 置顶 · 544 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular6中option多项转移 #angular6中option使用

angular4-6开发专栏收录该内容

12 篇文章

订阅专栏

其中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",'');
  }