觸發變化和選擇選擇2阿賈克斯

Question

填充餘米使用Ajax和processResults功能在這個代碼填充我的select2，

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的方式控制？

Answer 1

因此，在我工作圍繞它通過預填充我的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; 
     }) 
    })