触发变化和选择选择2阿贾克斯
问题描述:
填充余米使用Ajax和processResults
功能在这个代码填充我的select2
,触发变化和选择选择2阿贾克斯
function PopulateSelect2(sqlclass, ControlID, PlaceHolder) {
$('#' + ControlID).select2({
placeholder: PlaceHolder,
allowClear: true,
theme: "bootstrap",
ajax: {
type: "POST",
url: "../Web_Services/Common/Controllers.asmx/populateCtls",
contentType: "application/json; charset=utf-8",
dataType: "json",
//delay: 250,
data: JSON.stringify({ selector: sqlclass, subselector: '' }),
processResults: function (data) {
var parsed = JSON.parse(data.d);
console.log(parsed)
return {
results: parsed
};
}
},
});}
,我调用这个函数以这种方式,
$(document).ready(function() {
PopulateSelect2("ddl_occupation", "AddrStateID", "Select")
});
我试图通过触发更改后设置值,但它不起作用
我试过以下,
$('#AddrStateID').val(4).trigger('change.select2');
我设法触发列表内,但没有使用这个代码
$("#AddrStateID").select2("trigger", "select", {
data: { id: "4" }
})
表示select
元件控制值选择是有触发选择和显示结果在select
的方式控制?
答
因此,在我工作围绕它通过预填充我的select
控制由ajax
呼叫,但不能使用select2 - ajax call
我添加以下属性到每个select
控制
parent="" param="" child="" placeholder="" aval=""
其中,
parent:
代表父母id选择器, param:
代表我使用的ajax
呼叫控制的数据参数, child:
表示控件的子控件ID选择, placeholder:
代表控件的占位符, aval:
代表情况下,控制分配的值要填充和选择,因为我用我的形式存储数据并读取数据。
在下面的例子中我有3个select
级联控件。
<div class="panel-body">
<div class="col-xs-12">
<div class="form-grobtn row">
<label class="col-sm-2 col-form-label">File Grobtn</label>
<div class="col-sm-10">
<select id="GpId" style="width: 100%"
class="form-control populate" name="GpId" parent="" param="ddl_btnldgp" child="#CatId"
placeholder="File Grobtn..."
aval="">
<option></option>
</select>
</div>
</div>
<div class="form-grobtn row">
<label class="col-sm-2 col-form-label">File Category</label>
<div class="col-sm-10">
<select id="CatId" style="width: 100%"
class="form-control populate" name="CatId" parent="#GpId" param="ddl_btnldcat"
placeholder="Select File Category..."
child="#CatDtlId" aval="">
<option></option>
</select>
</div>
</div>
<div class="form-grobtn row">
<label for="inputPassword3" class="col-sm-2 col-form-label">File Type</label>
<div class="col-sm-10">
<select id="CatDtlId" style="width: 100%"
class="form-control populate" parent="#CatId" param="ddl_btnldcatdtl" child=""
placeholder="Select File Type..."
aval="">
<option></option>
</select>
</div>
</div>
</div>
</div>
<button id="btn" class="btn cUpldBtn btn-success" type="button">
Assign</button>
并使用此功能
function populateddl(ctl) {
var $this = $(ctl);
var parent, param, child, aval
parent = $this.attr('parent');
placeholder = $this.attr('placeholder');
child = $this.attr('child');
$(child).prop("disabled", true);
param = $this.attr('param');
aval = $this.attr('aval');
if (!parent) {
$.ajax({
type: "POST",
url: "../Web_Services/Common/Controllers.asmx/populateCtls",
data: JSON.stringify(obj = {
selector: param,
subselector: null
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonData = JSON.parse(data.d);
$this.html('').append('<option>')
$(child).prop("disabled", true)
$this.select2({
data: jsonData,
placeholder: $this.attr('PlaceHolder'),
allowClear: true,
theme: "bootstrap"
});
if (aval) { $this.val(aval).trigger('change'); $this.attr('aval',''); }
},
})
}
$this.change(function() {
if ($this.val() && child) {
$.ajax({
type: "POST",
url: "../Web_Services/Common/Controllers.asmx/populateCtls",
data: JSON.stringify(obj = {
selector: $(child).attr('param'),
subselector: $this.val()
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonData = JSON.parse(data.d);
$(child).html('').append('<option>')
$(child).prop("disabled", false)
$(child).select2({
data: jsonData,
placeholder: $(child).attr('PlaceHolder'),
allowClear: true,
theme: "bootstrap"
});
if ($(child).attr('aval')) { $(child).val($(child).attr('aval')).trigger('change'); $(child).attr('aval', ''); }
},
})
} else {
$(child).html('').append('<option>').prop("disabled", true).trigger('change');
}
})}
只有父母(包括那些父母SUB,请选择控制孩子的)使用
在这个例子中,我填充如下被称为现被填充,
$(document).ready(function() {
populateddl('#GpId');
populateddl('#CatId');
})
为了赋值s,我需要为子控件填充和选择值后缀,
$(document).ready(function() {
$("#btn").click(function() {
$('#GpId').val(1).attr('aval', '1').trigger('change', 'select2');
$('#CatId').val(2).attr('aval', '2').trigger('change', 'select2');
$('#CatDtlId').val(1).attr('aval', '1').trigger('change', 'select2');
return false;
})
})