我如何 select select2 selectbox 与 jquery 的选项？

Question

我尝试 select bird 我的 select 盒子 jquery。但它一直是 cat，无论我做什么：

$(function () {
  $(".select2").select2();
   $(".select2").val('bird');
      $('.select2').find('option[value="bird"]').prop('selected', true); 
});

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2"  style="width: 100%;">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
  </select>
</div>

Answer 1

设置值后需要触发change事件如下：

$(function () {
  $(".select2").select2();
   $(".select2").val('bird').trigger("change");
      
});

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2"  style="width: 100%;">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
  </select>
</div>

Answer 2

$(function () {
  $(".select2").select2();
   $(".select2").val('bird');
      $('.select2').find('option[value="bird"]').prop('selected', true).change(); 
});

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2"  style="width: 100%;">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
  </select>
</div>

Answer 3

如果添加到选项，

Select2 会尊重您的初始 selected 属性。我不确定这是否适用于您的情况，但这可能是最语义化的解决方案。

$(function () {
  $(".select2").select2();
});

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2"  style="width: 100%;">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option selected value="bird">Bird</option>
  </select>
</div>

我如何 select select2 selectbox 与 jquery 的选项？

How can I select an option of select2 selectbox with jquery?

jquery

select2