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下拉框
});
多选下拉框,带全部选项
最新推荐文章于 2024-08-30 16:00:39 发布