多选下拉框,带全部选项

9 篇文章 0 订阅
6 篇文章 0 订阅
1、页面
<div class="form-group">
                    <label class="col-lg-4 control-label" for="mc_ysjsgl">
                      <require-label></require-label>
                      授权对象:</label>
                    <div class="col-lg-8">
                      <select id="sqdx_ysjsglid" class="form-control" formControlName="sqdx_ysjsglCtr"
                               data-search-live="true" multiple></select>
                      <div *ngIf="formGroup_ysjsgl.get('sqdx_ysjsglCtr').invalid&&formGroup_ysjsgl.get('sqdx_ysjsglCtr').dirty">
                          <span *ngIf="formGroup_ysjsgl.hasError('snone','sqdx_ysjsglCtr')"
                                class="help-block text-danger">
                            <tool-tip [o]="formGroup_ysjsgl.getError('snone','sqdx_ysjsglCtr').msg"></tool-tip>
                          </span>
                      </div>
                    </div>
                  </div>
2、获取
$("#sqdx_ysjsglid").empty();
            let km_str = "";
            let iscanChoosenum = 0;
            if(kmArr.length > 0) {
              kmArr.forEach((item) => {
                if(item.canChoose === '0' || item.canChoose === 0) {//0可以选择,未授权,1不可以选择,已授权
                  if(iscanChoosenum === 0) {
                    km_str = "<option value='all' >全部</option>";
                    that.initsqdxselallbmarr = ['all'];//所有数据
                  }
                  iscanChoosenum ++;
                  km_str += "<option value='" + item.id + "'>" + item.name + "</option>";
                  that.initsqdxselallbmarr.push(item.id);
                }
              });
            }
            $("#sqdx_ysjsglid").append(km_str);
            $("#sqdx_ysjsglid").selectpicker({
              size: 5
            });

            //  // 初始化显示表单;
            this.formGroup_ysjsgl.patchValue({
              sqdx_ysjsglCtr: '',
            });
            $("#sqdx_ysjsglid").selectpicker("val",'');
            $("#sqdx_ysjsglid").selectpicker("refresh");

3、保存
// 表单验证通过
    const formgroupvs = this.formGroup_ysjsgl.getRawValue();
    this.commservice.info("授权响应式表单验证通过", "ksgljg", formgroupvs);
    let sqdx_ysjsgl = formgroupvs.sqdx_ysjsglCtr;
    if(sqdx_ysjsgl[0] === 'all') {
      sqdx_ysjsgl = sqdx_ysjsgl.splice(1);
    }
    sqdx_ysjsgl = sqdx_ysjsgl.filter((it) => {
      return it != '';
    });
    const sqdx_ysjsglarr = sqdx_ysjsgl.join(',');
    console.log(sqdx_ysjsgl);
    console.log(sqdx_ysjsglarr);
4、赋值:
 this.formGroup_yssqgl.patchValue({
        sqdx_ysjsglCtr: this.commservice.removeSpace(false, row.roleIds).split(','),
      });
      $("#sqdx_ysjsglid").selectpicker("val",this.commservice.removeSpace(false, row.roleIds).split(','));
      $("#sqdx_ysjsglid").selectpicker("render");
5、过程(change事件)
$('#sqdx_ysjsglid').change(function() {
      const sqdxnowVarr = $('#sqdx_ysjsglid').val();
      const numlen = $('#sqdx_ysjsglid').find('option').length;
      let isall = false;
      if(sqdxnowVarr) {
        for(let i = 0; i < sqdxnowVarr.length; i++ ) {
          if(sqdxnowVarr[i] === 'all') {
            isall = true;
          }
        }
      }
      if(isall) {
        for(let i = 1; i < numlen; i++ ) {
          $("#sqdx_ysjsglid").find("option").eq(i).prop('disabled', 'disabled');//除了全部,其他均不可点击
        }
        that.formGroup_ysjsgl.patchValue({
          sqdx_ysjsglCtr: that.initsqdxselallbmarr,
        });
        $("#sqdx_ysjsglid").selectpicker("val",that.initsqdxselallbmarr);
        $("#sqdx_ysjsglid").selectpicker("render");
      } else {
        for(let i = 0; i < numlen; i++ ) {
          $("#sqdx_ysjsglid").find("option").eq(i).prop('disabled', '');
        }
      }
      $('#sqdx_ysjsglid').selectpicker('refresh'); //刷新当前select下拉框

    });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值