jQuery Select2 3.5.2 在动态创建的下拉列表中设置值

jQuery Select2 3.5.2 set value in dynamically created dropdown

我正在使用旧版本的 select2 - 要将数组绑定到 select ,我需要使用 <input type="text"> 。是否可以将 select 的值设置为某个动作的特定值,比如单击。我在 stack overflow 中遇到了很多问题,但在 <input type="text"> 的情况下似乎没有解决方案。

这是我的代码

var value = [{
  id: 0,
  text: 'enhancement'
}, {
  id: 1,
  text: 'bug'
}, {
  id: 2,
  text: 'duplicate'
}, {
  id: 3,
  text: 'invalid'
}, {
  id: 4,
  text: 'wontfix'
}]


$(document).ready(function() {
  $(".lang").select2({
    data: value
  })


});

$("#btn").click(function() {
  $(".lang").select2('val', 'bug');
});
<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/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />


<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">
<input class="lang" type="text" style="width:100px">

<button id="btn">Click Here</button>

更新的答案支持同时更改多个 select (class) 并使用数据(id 和文本)对象而不是值 (id)

  1. 为什么要调用两次 select2() ?
  2. 如果你想select一些东西,你需要传递值作为参数,而不是描述

快速解决方案:$("#lang").select2('val', 1);

var value = [{
  id: 0,
  text: 'enhancement'
}, {
  id: 1,
  text: 'bug'
}, {
  id: 2,
  text: 'duplicate'
}, {
  id: 3,
  text: 'invalid'
}, {
  id: 4,
  text: 'wontfix'
}]


$(document).ready(function() {
  $(".lang").select2({
    data: value
  })


});

$("#btn").click(function() {
  $(".lang").select2('val', 1);
});

$("#btn-2").click(function() {
  $(".lang").select2('data', {id: 0, text: 'enhancement'});
});
<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/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />


<input id="lang_1" type="text" class="lang" style="width:100px"><br />
<input id="lang_2" type="text" class="lang" style="width:100px"><br />
<input id="lang_3" type="text" class="lang" style="width:100px"><br />

<button id="btn">Set all to value 1</button><br />
<button id="btn-2">Set all to data (id & text object)</button>