title: Set selected items on Select2 when page load (ASPX)
body: <p>I google about 6 hrs., there are numbers of Select2 questions like this but I still stuck at this problem.</p>
  <p>I want to show items that user selected before form submit after Page load.</p>
  <p>jQuery 2.2.1, Select2 4.0.13</p>
  <p><a href="https://i.stack.imgur.com/uoIgr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uoIgr.jpg" alt="" /></a></p>
  <p><em>Markup</em></p>
  <pre><code>&lt;select id=&quot;ddlMaterial&quot; class=&quot;rbp-material-ddl&quot; multiple=&quot;multiple&quot; style=&quot;width: 100%&quot;&gt; &lt;/select&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function () {
          $.ajax({
              type: &quot;POST&quot;,
              url: &quot;RBP.aspx/GetOptionList&quot;,
              contentType: &quot;application/json; charset=utf-8&quot;,
              dataType: &quot;json&quot;,
              success: function (data) {
                  var obj = JSON.parse(data.d);
                  var s = '';
                  ... make option group ...
                  $('.rbp-material-ddl').html(s);
              }
          });
  
          $('.rbp-material-ddl').select2({
              closeOnSelect: false, allowClear: true
          })
  
          $('.rbp-material-ddl').val(&lt;%=selectedList%&gt;).trigger('change');
      });
  &lt;/script&gt;
  </code></pre>
  <p>selectedList is a variable that I stored user selection.</p>
  <p>When I am debug while page loading, I got $('.rbp-material-ddl').val(['help','me','please']).trigger('change'); as it meant to be and it was executed but select2 shows nothing.</p>
  <p>When I execute that command via Chrome DevTool after everything is loaded the select2 show 3 selection properly. :'(</p>
  <p>I also tried following command and I have no luck.</p>
  <pre><code>$('.rbp-material-ddl').val(['please']);
  $('.rbp-material-ddl').trigger('change');
  </code></pre>
  <p>Please give me some advice.</p>
  <p>Thank you</p>