blocks|key|83996|text|我认为您需要initSelection函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|83997|$("#programid").select2({
++placeholder:+"Select+a+Program",
++allowClear:+true,
++minimumInputLength:+3,
++ajax:+{
++++url:+"ajax.php",
++++dataType:+'json',
++++quietMillis:+200,
++++data:+function+(term,+page)+{
++++++return+{
++++++++term:+term,+//search+term
++++++++flag:+'selectprogram',
++++++++page:+page+//+page+number
++++++};
++++},
++++results:+function+(data)+{
++++++return+{results:+data};
++++}
++},
++initSelection:+function+(element,+callback)+{
++++var+id+=+$(element).val();
++++if+(id+!==+"")+{
++++++$.ajax("ajax.php/get_where",+{
++++++++data:+{programid:+id},
++++++++dataType:+"json"
++++++}).done(function+(data)+{
++++++++$.each(data,+function+(i,+value)+{
++++++++++callback({"text":+value.text,+"id":+value.id});
++++++++});
++++++++;
++++++});
++++}
++},
++dropdownCssClass:+"bigdrop",
++escapeMarkup:+function+(m)+{+return+m;+}
});|code-block|syntax|javascript|83998|entityMap^0|6|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I think you need the <code>initSelection</code> function </p>

<pre class="lang-js prettyprint-override"><code>$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
</code></pre>


blocks|key|84025|text|我这样做是为了在select2+ajax下拉菜单中预置元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84026|++++++//preset+element+values
++++++++$(id).val(topics);
+++++++//topics+is+an+array+of+format+[{"id":"","text":""},+.....]
++++++++++setTimeout(function(){
+++++++++++ajaxTopicDropdown(id,
++++++++++++++++2,location.origin%2B"/api+for+gettings+topics/",
++++++++++++++++"Pick+a+topic",+true,+5);++++++++++++++++++++++
++++++++++++},1);
++++++++//+ajaxtopicDropdown+is+dry+fucntion+to+get+topics+for+diffrent+element+and+url|code-block|syntax|javascript|84027|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I did something like this to preset elements in select2 ajax dropdown</p>

<pre><code>      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
</code></pre>


blocks|key|84047|text|在select2+-++v4.0.1的当前版本中，您可以像这样设置该值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|84048|​|84049|var+$example+=+$('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click",+function+()+{+$example.val("CA").trigger("change");+});

//+Option+2+if+you+can't+trigger+the+change+event.
var+$exampleDestroy+=+$('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click",+function+()+{+$exampleDestroy.val("CA").select2('destroy').select2();+});|code-block|syntax|javascript|84050|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link+href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css"+rel="stylesheet"+/>

using+"trigger(change)"
<select+class="js-example-programmatic">
++<optgroup+label="Alaskan/Hawaiian+Time+Zone">
++++<option+value="AK">Alaska</option>
++++<option+value="HI">Hawaii</option>
++</optgroup>
++<optgroup+label="Pacific+Time+Zone">
++++<option+value="CA">California</option>
++++<option+value="NV">Nevada</option>
++++<option+value="OR">Oregon</option>
++++<option+value="WA">Washington</option>
++</optgroup>
++<optgroup+label="Mountain+Time+Zone">
++++<option+value="AZ">Arizona</option>
++++<option+value="CO">Colorado</option>
++++<option+value="ID">Idaho</option>
++++<option+value="MT">Montana</option>
++++<option+value="NE">Nebraska</option>
++++<option+value="NM">New+Mexico</option>
++++<option+value="ND">North+Dakota</option>
++++<option+value="UT">Utah</option>
++++<option+value="WY">Wyoming</option>
++</optgroup>
++<optgroup+label="Central+Time+Zone">
++++<option+value="AL">Alabama</option>
++++<option+value="AR">Arkansas</option>
++++<option+value="IL">Illinois</option>
++++<option+value="IA">Iowa</option>
++++<option+value="KS">Kansas</option>
++++<option+value="KY">Kentucky</option>
++++<option+value="LA">Louisiana</option>
++++<option+value="MN">Minnesota</option>
++++<option+value="MS">Mississippi</option>
++++<option+value="MO">Missouri</option>
++++<option+value="OK">Oklahoma</option>
++++<option+value="SD">South+Dakota</option>
++++<option+value="TX">Texas</option>
++++<option+value="TN">Tennessee</option>
++++<option+value="WI">Wisconsin</option>
++</optgroup>
++<optgroup+label="Eastern+Time+Zone">
++++<option+value="CT">Connecticut</option>
++++<option+value="DE">Delaware</option>
++++<option+value="FL">Florida</option>
++++<option+value="GA">Georgia</option>
++++<option+value="IN">Indiana</option>
++++<option+value="ME">Maine</option>
++++<option+value="MD">Maryland</option>
++++<option+value="MA">Massachusetts</option>
++++<option+value="MI">Michigan</option>
++++<option+value="NH">New+Hampshire</option>
++++<option+value="NJ">New+Jersey</option>
++++<option+value="NY">New+York</option>
++++<option+value="NC">North+Carolina</option>
++++<option+value="OH">Ohio</option>
++++<option+value="PA">Pennsylvania</option>
++++<option+value="RI">Rhode+Island</option>
++++<option+value="SC">South+Carolina</option>
++++<option+value="VT">Vermont</option>
++++<option+value="VA">Virginia</option>
++++<option+value="WV">West+Virginia</option>
++</optgroup>
</select>

using+destroy:+
<select+class="js-example-programmatic">
++<optgroup+label="Alaskan/Hawaiian+Time+Zone">
++++<option+value="AK">Alaska</option>
++++<option+value="HI">Hawaii</option>
++</optgroup>
++<optgroup+label="Pacific+Time+Zone">
++++<option+value="CA">California</option>
++++<option+value="NV">Nevada</option>
++++<option+value="OR">Oregon</option>
++++<option+value="WA">Washington</option>
++</optgroup>
++<optgroup+label="Mountain+Time+Zone">
++++<option+value="AZ">Arizona</option>
++++<option+value="CO">Colorado</option>
++++<option+value="ID">Idaho</option>
++++<option+value="MT">Montana</option>
++++<option+value="NE">Nebraska</option>
++++<option+value="NM">New+Mexico</option>
++++<option+value="ND">North+Dakota</option>
++++<option+value="UT">Utah</option>
++++<option+value="WY">Wyoming</option>
++</optgroup>
++<optgroup+label="Central+Time+Zone">
++++<option+value="AL">Alabama</option>
++++<option+value="AR">Arkansas</option>
++++<option+value="IL">Illinois</option>
++++<option+value="IA">Iowa</option>
++++<option+value="KS">Kansas</option>
++++<option+value="KY">Kentucky</option>
++++<option+value="LA">Louisiana</option>
++++<option+value="MN">Minnesota</option>
++++<option+value="MS">Mississippi</option>
++++<option+value="MO">Missouri</option>
++++<option+value="OK">Oklahoma</option>
++++<option+value="SD">South+Dakota</option>
++++<option+value="TX">Texas</option>
++++<option+value="TN">Tennessee</option>
++++<option+value="WI">Wisconsin</option>
++</optgroup>
++<optgroup+label="Eastern+Time+Zone">
++++<option+value="CT">Connecticut</option>
++++<option+value="DE">Delaware</option>
++++<option+value="FL">Florida</option>
++++<option+value="GA">Georgia</option>
++++<option+value="IN">Indiana</option>
++++<option+value="ME">Maine</option>
++++<option+value="MD">Maryland</option>
++++<option+value="MA">Massachusetts</option>
++++<option+value="MI">Michigan</option>
++++<option+value="NH">New+Hampshire</option>
++++<option+value="NJ">New+Jersey</option>
++++<option+value="NY">New+York</option>
++++<option+value="NC">North+Carolina</option>
++++<option+value="OH">Ohio</option>
++++<option+value="PA">Pennsylvania</option>
++++<option+value="RI">Rhode+Island</option>
++++<option+value="SC">South+Carolina</option>
++++<option+value="VT">Vermont</option>
++++<option+value="VA">Virginia</option>
++++<option+value="WV">West+Virginia</option>
++</optgroup>
</select>

<button+class="js-programmatic-set-val">set+value</button>|84051|84052|entityMap|0|LINK|mutability|MUTABLE|url|https://select2.github.io/examples.html#programmatic^0|1|7|C|6|1|H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>In the current version on <a href="https://select2.github.io/examples.html#programmatic" rel="noreferrer"><code>select2</code> -  <code>v4.0.1</code></a> you can set the value like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;
&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;

using "trigger(change)"
&lt;select class="js-example-programmatic"&gt;
  &lt;optgroup label="Alaskan/Hawaiian Time Zone"&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Pacific Time Zone"&gt;
    &lt;option value="CA"&gt;California&lt;/option&gt;
    &lt;option value="NV"&gt;Nevada&lt;/option&gt;
    &lt;option value="OR"&gt;Oregon&lt;/option&gt;
    &lt;option value="WA"&gt;Washington&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Mountain Time Zone"&gt;
    &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
    &lt;option value="CO"&gt;Colorado&lt;/option&gt;
    &lt;option value="ID"&gt;Idaho&lt;/option&gt;
    &lt;option value="MT"&gt;Montana&lt;/option&gt;
    &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
    &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
    &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
    &lt;option value="UT"&gt;Utah&lt;/option&gt;
    &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Central Time Zone"&gt;
    &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
    &lt;option value="IL"&gt;Illinois&lt;/option&gt;
    &lt;option value="IA"&gt;Iowa&lt;/option&gt;
    &lt;option value="KS"&gt;Kansas&lt;/option&gt;
    &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
    &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
    &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
    &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
    &lt;option value="MO"&gt;Missouri&lt;/option&gt;
    &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
    &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
    &lt;option value="TX"&gt;Texas&lt;/option&gt;
    &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
    &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Eastern Time Zone"&gt;
    &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
    &lt;option value="DE"&gt;Delaware&lt;/option&gt;
    &lt;option value="FL"&gt;Florida&lt;/option&gt;
    &lt;option value="GA"&gt;Georgia&lt;/option&gt;
    &lt;option value="IN"&gt;Indiana&lt;/option&gt;
    &lt;option value="ME"&gt;Maine&lt;/option&gt;
    &lt;option value="MD"&gt;Maryland&lt;/option&gt;
    &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
    &lt;option value="MI"&gt;Michigan&lt;/option&gt;
    &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
    &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
    &lt;option value="NY"&gt;New York&lt;/option&gt;
    &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
    &lt;option value="OH"&gt;Ohio&lt;/option&gt;
    &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
    &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
    &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
    &lt;option value="VT"&gt;Vermont&lt;/option&gt;
    &lt;option value="VA"&gt;Virginia&lt;/option&gt;
    &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;

using destroy: 
&lt;select class="js-example-programmatic"&gt;
  &lt;optgroup label="Alaskan/Hawaiian Time Zone"&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Pacific Time Zone"&gt;
    &lt;option value="CA"&gt;California&lt;/option&gt;
    &lt;option value="NV"&gt;Nevada&lt;/option&gt;
    &lt;option value="OR"&gt;Oregon&lt;/option&gt;
    &lt;option value="WA"&gt;Washington&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Mountain Time Zone"&gt;
    &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
    &lt;option value="CO"&gt;Colorado&lt;/option&gt;
    &lt;option value="ID"&gt;Idaho&lt;/option&gt;
    &lt;option value="MT"&gt;Montana&lt;/option&gt;
    &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
    &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
    &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
    &lt;option value="UT"&gt;Utah&lt;/option&gt;
    &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Central Time Zone"&gt;
    &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
    &lt;option value="IL"&gt;Illinois&lt;/option&gt;
    &lt;option value="IA"&gt;Iowa&lt;/option&gt;
    &lt;option value="KS"&gt;Kansas&lt;/option&gt;
    &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
    &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
    &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
    &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
    &lt;option value="MO"&gt;Missouri&lt;/option&gt;
    &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
    &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
    &lt;option value="TX"&gt;Texas&lt;/option&gt;
    &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
    &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Eastern Time Zone"&gt;
    &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
    &lt;option value="DE"&gt;Delaware&lt;/option&gt;
    &lt;option value="FL"&gt;Florida&lt;/option&gt;
    &lt;option value="GA"&gt;Georgia&lt;/option&gt;
    &lt;option value="IN"&gt;Indiana&lt;/option&gt;
    &lt;option value="ME"&gt;Maine&lt;/option&gt;
    &lt;option value="MD"&gt;Maryland&lt;/option&gt;
    &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
    &lt;option value="MI"&gt;Michigan&lt;/option&gt;
    &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
    &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
    &lt;option value="NY"&gt;New York&lt;/option&gt;
    &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
    &lt;option value="OH"&gt;Ohio&lt;/option&gt;
    &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
    &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
    &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
    &lt;option value="VT"&gt;Vermont&lt;/option&gt;
    &lt;option value="VA"&gt;Virginia&lt;/option&gt;
    &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;

&lt;button class="js-programmatic-set-val"&gt;set value&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4590310|text|同样，正如我尝试过的，当在select2中使用ajax时，用于在select2中设置新值的programmatic+control方法对我不起作用！现在我写这些代码来解决这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4590311|$('#sel')
++++.empty()+//empty+select
++++.append($("<option/>")+//add+option+tag+in+select
++++++++.val("20")+//set+value+for+option+to+post+it
++++++++.text("nabi"))+//set+a+text+for+show+in+select
++++.val("20")+//select+option+of+select2
++++.trigger("change");+//apply+to+select2|code-block|syntax|javascript|4590312|您可以在以下链接中测试完整的示例代码：https://jsfiddle.net/NabiKAZ/2g1qq26v/32/|4590313|在此示例代码中，有一个ajax+select2，您可以使用按钮设置新值。|4590314|​|4590315|$("#btn").click(function()+{
++$('#sel')
++++.empty()+//empty+select
++++.append($("<option/>")+//add+option+tag+in+select
++++++.val("20")+//set+value+for+option+to+post+it
++++++.text("nabi"))+//set+a+text+for+show+in+select
++++.val("20")+//select+option+of+select2
++++.trigger("change");+//apply+to+select2
});

$("#sel").select2({
++ajax:+{
++++url:+"https://api.github.com/search/repositories",
++++dataType:+'json',
++++delay:+250,
++++data:+function(params)+{
++++++return+{
++++++++q:+params.term,+//+search+term
++++++++page:+params.page
++++++};
++++},
++++processResults:+function(data,+params)+{
++++++//+parse+the+results+into+the+format+expected+by+Select2
++++++//+since+we+are+using+custom+formatting+functions+we+do+not+need+to
++++++//+alter+the+remote+JSON+data,+except+to+indicate+that+infinite
++++++//+scrolling+can+be+used
++++++params.page+=+params.page+%7C%7C+1;

++++++return+{
++++++++results:+data.items,
++++++++pagination:+{
++++++++++more:+(params.page+*+30)+<+data.total_count
++++++++}
++++++};
++++},
++++cache:+true
++},
++escapeMarkup:+function(markup)+{
++++return+markup;
++},+//+let+our+custom+formatter+work
++minimumInputLength:+1,
++templateResult:+formatRepo,+//+omitted+for+brevity,+see+the+source+of+this+page
++templateSelection:+formatRepoSelection+//+omitted+for+brevity,+see+the+source+of+this+page
});

function+formatRepo(repo)+{
++if+(repo.loading)+return+repo.text;

++var+markup+=+"<div+class='select2-result-repository+clearfix'>"+%2B
++++"<div+class='select2-result-repository__avatar'><img+src='"+%2B+repo.owner.avatar_url+%2B+"'+/></div>"+%2B
++++"<div+class='select2-result-repository__meta'>"+%2B
++++"<div+class='select2-result-repository__title'>"+%2B+repo.full_name+%2B+"</div>";

++if+(repo.description)+{
++++markup+%2B=+"<div+class='select2-result-repository__description'>"+%2B+repo.description+%2B+"</div>";
++}

++markup+%2B=+"<div+class='select2-result-repository__statistics'>"+%2B
++++"<div+class='select2-result-repository__forks'><i+class='fa+fa-flash'></i>+"+%2B+repo.forks_count+%2B+"+Forks</div>"+%2B
++++"<div+class='select2-result-repository__stargazers'><i+class='fa+fa-star'></i>+"+%2B+repo.stargazers_count+%2B+"+Stars</div>"+%2B
++++"<div+class='select2-result-repository__watchers'><i+class='fa+fa-eye'></i>+"+%2B+repo.watchers_count+%2B+"+Watchers</div>"+%2B
++++"</div>"+%2B
++++"</div></div>";

++return+markup;
}

function+formatRepoSelection(repo)+{
++return+repo.full_name+%7C%7C+repo.text;
}|4590316|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link+rel="stylesheet"+type="text/css"+href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script+type="text/javascript"+src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link+rel="stylesheet"+type="text/css"+href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script+type="text/javascript"+src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link+rel="stylesheet"+type="text/css"+href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select+id="sel"+multiple="multiple"+class="col-xs-5">
</select>

<button+id="btn">Set+Default</button>|4590317|4590318|entityMap|0|LINK|mutability|MUTABLE|url|https://select2.github.io/examples.html#programmatic|1|https://jsfiddle.net/NabiKAZ/2g1qq26v/32/^0|19|K|0|0|0|J|15|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|S|3|N|5|6|7|1G|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]]]

<p>Also as I tried, when use ajax in select2, the <a href="https://select2.github.io/examples.html#programmatic" rel="noreferrer">programmatic control</a> methods for set new values in select2 does not work for me!
Now I write these code for resolve the problem:</p>

<pre><code>$('#sel')
    .empty() //empty select
    .append($("&lt;option/&gt;") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
</code></pre>

<p>You can test complete sample code in here link: <a href="https://jsfiddle.net/NabiKAZ/2g1qq26v/32/" rel="noreferrer">https://jsfiddle.net/NabiKAZ/2g1qq26v/32/</a><br>
In this sample code there is a ajax select2 and you can set new value with a button.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#btn").click(function() {
  $('#sel')
    .empty() //empty select
    .append($("&lt;option/&gt;") //add option tag in select
      .val("20") //set value for option to post it
      .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) &lt; data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "&lt;div class='select2-result-repository clearfix'&gt;" +
    "&lt;div class='select2-result-repository__avatar'&gt;&lt;img src='" + repo.owner.avatar_url + "' /&gt;&lt;/div&gt;" +
    "&lt;div class='select2-result-repository__meta'&gt;" +
    "&lt;div class='select2-result-repository__title'&gt;" + repo.full_name + "&lt;/div&gt;";

  if (repo.description) {
    markup += "&lt;div class='select2-result-repository__description'&gt;" + repo.description + "&lt;/div&gt;";
  }

  markup += "&lt;div class='select2-result-repository__statistics'&gt;" +
    "&lt;div class='select2-result-repository__forks'&gt;&lt;i class='fa fa-flash'&gt;&lt;/i&gt; " + repo.forks_count + " Forks&lt;/div&gt;" +
    "&lt;div class='select2-result-repository__stargazers'&gt;&lt;i class='fa fa-star'&gt;&lt;/i&gt; " + repo.stargazers_count + " Stars&lt;/div&gt;" +
    "&lt;div class='select2-result-repository__watchers'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt; " + repo.watchers_count + " Watchers&lt;/div&gt;" +
    "&lt;/div&gt;" +
    "&lt;/div&gt;&lt;/div&gt;";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css"&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css"&gt;

&lt;select id="sel" multiple="multiple" class="col-xs-5"&gt;
&lt;/select&gt;

&lt;button id="btn"&gt;Set Default&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|84111|text|对于Ajax，使用$(".select2").val("").trigger("change")。这应该可以解决问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|84112|entityMap^0|9|13|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>For Ajax, use <code>$(".select2").val("").trigger("change")</code>. That should solve the problem.</p>


blocks|key|4590346|text|您应该使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590347|var+autocompleteIds=+$("#EventId");
autocompleteIds.empty().append('<option+value="Id">Text</option>').val("Id").trigger('change');

//+For+set+multi+selected+values
var+data+=++[];//Array+Ids
var+option+=++[];//Array+options+of+Ids+above
autocompleteIds.empty().append(option).val(data).trigger('change');

//+Callback+handler+that+will+be+called+on+success
request.done(function+(response,+textStatus,+jqXHR)+{
++++//+append+the+new+option
++++$("#EventId").append('<option+value="'+%2B+response.id+%2B+'">'+%2B+response.text+%2B+'</option>');

++++//+get+a+list+of+selected+values+if+any+-+or+create+an+empty+array
++++var+selectedValues+=+$("#EventId").val();
++++if+(selectedValues+==+null)+{
++++++++selectedValues+=+new+Array();
++++}
++++selectedValues.push(response.id);+++//+add+the+newly+created+option+to+the+list+of+selected+items
++++$("#EventId").val(selectedValues).trigger('change');+++//+have+select2+do+it's+thing
});|code-block|syntax|javascript|4590348|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You should use:</p>

<pre><code>var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('&lt;option value="Id"&gt;Text&lt;/option&gt;').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('&lt;option value="' + response.id + '"&gt;' + response.text + '&lt;/option&gt;');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});
</code></pre>


blocks|key|4590392|text|Phan的回答对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590393|$('#inputID').select2('data',+{id:+100,+a_key:+'Lorem+Ipsum'});|code-block|syntax|javascript|4590394|但是添加更改会触发事件|4590395|$('#inputID').select2('data',+{id:+100,+a_key:+'Lorem+Ipsum'}).change();|4590396|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>An Phan's answer worked for me:</p>

<pre><code>$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
</code></pre>

<p>But adding the change trigger the event</p>

<pre><code>$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
</code></pre>


blocks|key|4590419|text|var+$option+=+$("<option+selected></option>").val('1').text("Pick+me");

$('#select_id').append($option).trigger('change');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4590420|尝试这个append，然后选择。在AJAX调用时不会重复该选项。|unstyled|4590421|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var $option = $("&lt;option selected&gt;&lt;/option&gt;").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');
</code></pre>

<p>Try this append then select. Doesn't duplicate the option upon AJAX call.</p>


blocks|key|84201|text|如果使用的是输入框，则必须将"multiple“属性的值设置为"true”。例如,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84202|<script>
++++$(document).ready(function+()+{

++++++++var+arr+=+[{+id:+100,+text:+'Lorem+Ipsum+1'+},
++++++++++++{+id:+200,+text:+'Lorem+Ipsum+2'}];

++++++++$('#inputID').select2({
++++++++++++data:+arr,
++++++++++++width:+200,
++++++++++++multiple:+true
++++++++});
++++});
</script>|code-block|syntax|javascript|84203|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you are using an Input box, you must set the "multiple" property with its value as "true". For example,</p>

<pre><code>&lt;script&gt;
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
&lt;/script&gt;
</code></pre>


blocks|key|4590503|text|在select2+<+version4中，有用于远程数据加载的选项initSelection()，通过该选项可以将输入的初始值设置为编辑模式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4590504|$("#e6").select2({
++++placeholder:+"Search+for+a+repository",
++++minimumInputLength:+1,
++++ajax:+{+
++++++++//+instead+of+writing+the+function+to+execute+the+request+we+use+Select2's+convenient+helper
++++++++url:+"https://api.github.com/search/repositories",
++++++++dataType:+'json',
++++++++quietMillis:+250,
++++++++data:+function+(term,+page)+{
++++++++++++return+{
++++++++++++++++q:+term,+//+search+term
++++++++++++};
++++++++},
++++++++results:+function+(data,+page)+{
++++++++++++//+parse+the+results+into+the+format+expected+by+Select2.
++++++++++++//+since+we+are+using+custom+formatting+functions+we+do+not+need+to+alter+the+remote+JSON+data
++++++++++++return+{+results:+data.items+};
++++++++},
++++++++cache:+true
++++},
++++initSelection:+function(element,+callback)+{
++++++++//+the+input+tag+has+a+value+attribute+preloaded+that+points+to+a+preselected+repository's+id
++++++++//+this+function+resolves+that+id+attribute+to+an+object+that+select2+can+render
++++++++//+using+its+formatResult+renderer+-+that+way+the+repository+name+is+shown+preselected
++++++++var+id+=+$(element).val();
++++++++if+(id+!==+"")+{
++++++++++++$.ajax("https://api.github.com/repositories/"+%2B+id,+{
++++++++++++++++dataType:+"json"
++++++++++++}).done(function(data)+{+callback(data);+});
++++++++}
++++},
++++formatResult:+repoFormatResult,+//+omitted+for+brevity,+see+the+source+of+this+page
++++formatSelection:+repoFormatSelection,++//+omitted+for+brevity,+see+the+source+of+this+page
++++dropdownCssClass:+"bigdrop",+//+apply+css+that+makes+the+dropdown+taller
++++escapeMarkup:+function+(m)+{+return+m;+}+//+we+do+not+want+to+escape+markup+since+we+are+displaying+html+in+results
});|code-block|syntax|javascript|4590505|源文档：Select2+-+3.5.3|4590506|entityMap|0|LINK|mutability|MUTABLE|url|http://select2.github.io/select2/#ajax^0|1|I|X|F|0|0|4|F|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>In <code>select2 &lt; version4</code> there is the option <code>initSelection()</code> for remote data loading, through which it is possible to set initial value for the input as in edit mode.</p>

<pre><code>$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
</code></pre>

<p>Source Documentation : <a href="http://select2.github.io/select2/#ajax" rel="nofollow noreferrer">Select2 - 3.5.3</a></p>


blocks|key|4590561|text|有时，select2()会首先加载，这会使控件不能正确显示先前选择的值。延迟几秒钟就可以解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4590562|setTimeout(function(){++++++++++++++++++
++++$('#costcentreid').select2();+++++++++++++++
},3000);|code-block|syntax|javascript|4590563|entityMap^0|3|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Sometimes, <code>select2()</code> will be loading firstly, and that makes the control not to show previously selected value correctly. Putting a delay for some seconds can resolve this problem.</p>

<pre><code>setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);
</code></pre>


blocks|key|4590619|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590620|++++$('#country').select2("val",+"Your_value").trigger('change');|code-block|syntax|javascript|4590621|把你想要的值替换成Your_value|4590622|希望它能起作用:)|4590623|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use this code:</p>

<pre><code>    $('#country').select2("val", "Your_value").trigger('change');
</code></pre>

<p>Put your desired value instead of Your_value</p>

<p>Hope It will work :)</p>


blocks|key|84374|text|只是为了补充其他可能与我有相同问题的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84375|我尝试设置动态加载选项(从AJAX)中的selected选项，并尝试根据某些逻辑将其中一个选项设置为selected。|84376|我的问题来了，因为我没有尝试基于需要与值匹配的ID来设置所选选项，而不是基于与名称匹配的值！|84377|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Just to add to anyone else who may have come up with the same issue with me.</p>

<p>I was trying to set the selected option of my dynamically loaded options (from AJAX) and was trying to set one of the options as selected depending on some logic.</p>

<p>My issue came because I wasn't trying to set the selected option based on the ID which needs to match the value, not the value matching the name!</p>


blocks|key|84417|text|简单明了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84418|document.getElementById("select2-id_city-container").innerHTML+=+"Your+Text+Here";|code-block|syntax|javascript|84419|并将id_city更改为select的id。|offset|length|style|CODE|84420|编辑:在Glen的评论之后，我意识到我应该解释为什么以及它是如何对我起作用的：|84421|我让select2在我的表单上运行得很好。我唯一不能做的事情就是在编辑时显示当前选定的值。它正在搜索第三方API，保存新的和编辑旧的记录。过了一段时间，我意识到我不需要设置正确的值，只需要在字段中设置标签，因为如果用户不更改字段，什么都不会发生。在搜索和寻找了很多有问题的人之后，我决定用纯Javascript来制作它。它起作用了，我发了帖子，也许是为了帮助某人。我还建议为它设置一个计时器。|84422|entityMap^0|0|0|2|7|0|0|2|7|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>Nice and easy:</p>

<pre><code>document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";
</code></pre>

<p>And you change <code>id_city</code> to your select's id.</p>

<p>Edit: After Glen's comment I realize I should explain why and how it worked for me:</p>

<p>I had made <code>select2</code> working really nice for my form. The only thing I couldn't make work was to show the current selected value when editing. It was searching a third party API, saving new and editing old records. After a while I realized I didn't need to set the value correctly, only the label inside field, because if the user doesn't change the field, nothing happens. After searching and looking to a lot of people having trouble with it, I decided make it with pure Javascript. It worked and I posted to maybe help someone. I also suggest to set a timer for it.</p>


blocks|key|84432|text|我很喜欢这个-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84433|$("#drpServices").select2().val("0").trigger("change");|code-block|syntax|javascript|84434|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I did like this-</p>

<pre><code>$("#drpServices").select2().val("0").trigger("change");
</code></pre>


blocks|key|84468|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84469|$("#programid").val(["number:2",+"number:3"]).trigger("change");|code-block|syntax|javascript|84470|其中"number:2“中的2和"number:3”中的3是对象数组中的id字段|84471|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you can use this code :</p>

<pre><code>$("#programid").val(["number:2", "number:3"]).trigger("change");
</code></pre>

<p>where 2 in "number:2" and 3 in "number:3" are id field in object array</p>


blocks|key|4590740|text|对于多个值，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590741|$("#HouseIds").select2("val",+@Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));|code-block|syntax|javascript|4590742|这将转化为如下所示|4590743|$("#HouseIds").select2("val",+[35293,49525]);|4590744|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>For multiple values something like this:</p>

<pre><code>$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));
</code></pre>

<p>which will translate to something like this</p>

<pre><code>$("#HouseIds").select2("val", [35293,49525]);
</code></pre>


blocks|key|4590776|text|设置该值并立即触发更改事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590777|$('#selectteam').val([183,182]).trigger('change');|code-block|syntax|javascript|4590778|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Set the value and trigger the change event immediately.</p>

<pre><code>$('#selectteam').val([183,182]).trigger('change');
</code></pre>


blocks|key|4590804|text|++++$("#select_location_id").val(value);
++++$("#select_location_id").select2().trigger('change');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4590805|我用这个简单的代码解决了我的问题。其中#select_location_id是选择框的ID，value是select2框中列出的选项的值。|unstyled|4590806|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');
</code></pre>

<p>I solved my problem with this simple code. Where #select_location_id is an ID of select box and value is value of an option listed in select2 box.</p>


blocks|key|84574|text|如果您从ajax获取值，则在调用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84575|​|84576|$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');|code-block|syntax|javascript|84577|84578|在以下情况下，使用jquery函数确认ajax调用已完成|84579|84580|$.when(ajax1(),+ajax2(),+ajax3(),+ajax4()).done(function(a1,+a2,+a3,+a4){
++++++//+the+code+here+will+be+executed+when+all+four+ajax+requests+resolve.
++++++//+a1,+a2,+a3+and+a4+are+lists+of+length+3+containing+the+response+text,
++++++//+status,+and+jqXHR+object+for+each+of+the+four+ajax+calls+respectively.
++++});+|84581|正如这里所描述的那样[等到所有的jQuery+Ajax请求都是done?](https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done)|84582|84583|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>if you are getting your values from ajax, before calling </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');</code></pre>
</div>
</div>
</p>

<p>confirm that the ajax call has completed, using the jquery function when</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    }); </code></pre>
</div>
</div>

as described here 
[<a href="https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done][1]">Wait until all jQuery Ajax requests are done?</a></p>


blocks|key|4590881|text|建立在@tomloprod的答案之上。如果您使用的是x-editable，并且有一个select2(v4)字段，并且有多个需要预先选择的项目，则可能会出现这种情况。您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4590882|$("#select2field").on("shown",+function(e,+editable){
++++$(["test1",+"test2",+"test3",+"test4"]).each(function(k,+v){
++++++++//+Create+a+DOM+Option+and+pre-select+by+default~
++++++++var+newOption+=+new+Option(v.text,+v.id,+true,+true);
++++++++//+Append+it+to+the+select
++++++++$(editable.input.$input).append(newOption).trigger('change');
+++++});
});|code-block|syntax|javascript|4590883|这就是它的实际作用：|4590884|​|4590885|var+data+=+[
{
++++id:+0,
++++text:+'enhancement'
},
{
++++id:+1,
++++text:+'bug'
},
{
++++id:+2,
++++text:+'duplicate'
},
{
++++id:+3,
++++text:+'invalid'
},
{
++++id:+4,
++++text:+'wontfix'
}
];

$("#select2field").editable({
++++++++type:+"select2",
++++++++url:+'./',
++++++++name:+'select2field',
++++++++savenochange:+true,
++++++++send:+'always',
++++++++mode:+'inline',
++++++++source:+data,
++++++++value:+"bug,+wontfix",
++++++++tpl:+'<select+style="width:+201px;">',
++++++++select2:+{
++++++++++++width:+'201px',
++++++++++++tags:+true,
++++++++++++tokenSeparators:+[',',+'+'],
++++++++++++multiple:+true,
++++++++++++data:data
++++++++},
++++++++success:+function(response,+newValue)+{
++++++++++++console.log("success")
++++++++},
++++++++error:+function(response,+newValue)+{
++++++++++++if+(response.status+===+500)+{
++++++++++++++++return+'Service+unavailable.+Please+try+later.';
++++++++++++}+else+{
++++++++++++++++return+response.responseJSON;
++++++++++++}
++++++++}
++++});

var+preselect=+[
++++{
++++++++id:+1,
++++++++text:+'bug'
++++},
++++{
++++id:+4,
++++text:+'wontfix'
}
];

+$("#select2field").on("shown",+function(e,+editable){
++++$(preselect).each(function(k,+v){
++++++++//+Create+a+DOM+Option+and+pre-select+by+default~
++++++++var+newOption+=+new+Option(v.text,+v.id,+true,+true);
++++++++//+Append+it+to+the+select
++++++++$(editable.input.$input).append(newOption).trigger('change');
+++++});
});|4590886|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link+href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css"+rel="stylesheet"+/>

<link+href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css"+rel="stylesheet"/>
<script+src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a+id="select2field">bug,+wontfix</a>|4590887|4590888|我猜即使你没有使用x-editable，这也是可行的。我希望这能帮助到一些人。|4590889|entityMap|0|LINK|mutability|MUTABLE|url|https://vitalets.github.io/x-editable/^0|Q|A|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|Q|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

<p>To build ontop of @tomloprod's answer. By the odd chance that you are using <a href="https://vitalets.github.io/x-editable/" rel="nofollow noreferrer">x-editable</a>, and have a select2(v4) field and have multiple items you need to pre-select. You can use the following piece of code:</p>

<pre><code>$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});
</code></pre>

<p>and here it is in action:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
{
    id: 0,
    text: 'enhancement'
},
{
    id: 1,
    text: 'bug'
},
{
    id: 2,
    text: 'duplicate'
},
{
    id: 3,
    text: 'invalid'
},
{
    id: 4,
    text: 'wontfix'
}
];

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '&lt;select style="width: 201px;"&gt;',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;
&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;

&lt;link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"&gt;&lt;/script&gt;

&lt;a id="select2field"&gt;bug, wontfix&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>I guess that this would work even if you aren't using x-editable. I hope that htis could help someone.</p>


blocks|key|4590931|text|$('#inputID').val("100").select2();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4590932|在选择其中一个当前select之后应用select2会更合适。|unstyled|offset|length|style|CODE|4590933|entityMap^0|0|J|7|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>$('#inputID').val("100").select2();
</code></pre>

<p>It would be more appropriate to apply <code>select2</code> after choosing one of the current select.</p>


blocks|key|4590962|text|我使用select2和ajax+source和Laravel。在我的例子中，它是我从页面上收到的简单的工作循环选项，并将选项添加到select2中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590963|$filtri->stato+=+1,2，...；|4590964|$('#stato')是我的服务器端加载的select2|4590965|<script>
++++@foreach+($filtri->stato+as+$item)
+++++++$('#stato').append(new+Option("{{\App\Models\stato::find($item)->nome}}",{{$item}},+false,+true));
++++@endforeach
</script>|code-block|syntax|javascript|4590966|在我的例子中，我可以用find方法调用option的文本，但也可以用ajax调用|offset|length|style|CODE|4590967|entityMap^0|0|0|0|0|B|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I use select2 with ajax source with Laravel. In my case it simple work cycling option i receive from page and add Option to select2..</p>
<p>$filtri-&gt;stato = [1,2,...];</p>
<p>$('#stato') is my select2 with server side load</p>
<pre><code>&lt;script&gt;
    @foreach ($filtri-&gt;stato as $item)
       $('#stato').append(new Option(&quot;{{\App\Models\stato::find($item)-&gt;nome}}&quot;,{{$item}}, false, true));
    @endforeach
&lt;/script&gt;
</code></pre>
<p>In my case I can call text of option with <code>find</code> method, but it's possible do it with ajax call</p>


blocks|key|4590978|text|这对我来说很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4590979|++++++++initSelection:+function+(element,+callback)+{
++++var+id+=+$(element).val();
++++$.ajax("url/"+%2B+id,+{
++++++++dataType:+"json"
++++}).done(function+(data)+{
++++++++var+newOption+=+new+Option(data.title,+data.id,+true,+true);
++++++++$('#select2_id').append(newOption).trigger('change');
++++++++callback({"text":+data.title,+"id":+data.id});
++++});
},|code-block|syntax|javascript|4590980|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This work for me fine:</p>
<pre><code>        initSelection: function (element, callback) {
    var id = $(element).val();
    $.ajax(&quot;url/&quot; + id, {
        dataType: &quot;json&quot;
    }).done(function (data) {
        var newOption = new Option(data.title, data.id, true, true);
        $('#select2_id').append(newOption).trigger('change');
        callback({&quot;text&quot;: data.title, &quot;id&quot;: data.id});
    });
},
</code></pre>


<p>This belong to codes prior to Select2 version 4</p>
<p>I have a simple code of <code>select2</code> that get data from AJAX.</p>
<pre class="lang-js prettyprint-override"><code>$(&quot;#programid&quot;).select2({
  placeholder: &quot;Select a Program&quot;,
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: &quot;ajax.php&quot;,
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: &quot;bigdrop&quot;,
  escapeMarkup: function (m) { return m; }
});
</code></pre>
<p>This code is working, however, I need to set a value on it as if in edit mode. When user select a value first time, it will be saved and when he needs to edit that value it must appear in the same select menu (<code>select2</code>) to select the value previously selected but I can't find a way.</p>
<p>UPDATE:</p>
<p>The HTML code:</p>
<pre><code>&lt;input type=&quot;hidden&quot; name=&quot;programid&quot; id=&quot;programid&quot; class=&quot;width-500 validate[required]&quot;&gt;
</code></pre>
<p><a href="https://select2.github.io/select2/#programmatic" rel="noreferrer">Select2 programmatic access</a> does not work with this.</p>


How to set selected value of jQuery Select2?

服务器

jQuery

JSON

这属于Select2版本4之前的代码我有一个简单的select2代码，可以从AJAX中获取数据。$("#programid").select2({  placeholder: "Select a Program",  allowClear: true,  minimumInputLength: 3,  ajax: { ...

问如何设置jQuery Select2的选定值？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置jQuery Select2的选定值？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置jQuery Select2的选定值？
EN