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

时间:2016-03-25 09:27:49

标签: jquery select2

我正在使用旧版本的select2 - 在其中将数组绑定到select,我需要使用<input type="text">。是否可以在某个操作上将select的值设置为特定的值,例如单击。我在堆栈溢出中经历了很多问题,但是在<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>

1 个答案:

答案 0 :(得分:2)

更新了答案以支持在同一时间(类)中更改多个选项并使用数据(id&amp; text)对象而不是值(id)

  1. 为什么要拨打两次select2()?
  2. 如果要选择某些内容,则需要将值作为参数传递,而不是描述
  3. 快速解决方案:$("#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>