使用 jQuery，为 Select2 选择下拉列表赋值不起作用

阿雄科

我有一个复选框，选中时，为下拉选择框分配一个值。问题是，选择下拉菜单的设计与Select2为选择分配值不起作用。

我已经寻找了一段时间的解决方案，但没有得到明确的解决方案和解释。我希望，你可以帮助我如何解决问题。预先感谢您的建议。

这是它如何在“没有 Select2”的情况下运行的工作示例。小提琴链接。

这是“不工作”示例的“使用 Select2”版本的片段和小提琴：

$(".js-example-basic-single").select2();

$(function() {
   $("#geStd").click(function() {
      if ($(this).attr('id') === "geStd") {
         $("select#appearance").val("green");
      } else {
         $("#geStd").prop('checked', false);
      }
   });
   $("select").change(function() {
      if (this.value !== "green") {
         $("#geStd").prop('checked', false);
      }
   });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.css" />
<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.4/js/select2.full.min.js"></script>

<div class="col-md-9">
   <input id="geStd" type="checkbox">
   <label for="geStd">Set to standard</label>
</div>
<div class="row">
   <label for="" class="col-md-4">Appearance</label>
   <div class="col-md-8">
      <select id="appearance" name="" class="form-control js-example-basic-single">
         <option value="">Select one</option>
         <option value="red">Red</option>
         <option value="green">Green</option>
      </select>
   </div>
</div>

杰克夫斯基

可以触发change事件强制刷新选择值：

$(".js-example-basic-single").select2();

$(function() {
   $("#geStd").click(function() {
      if ($(this).attr('id') === "geStd") {
         $("#appearance").val("green").trigger('change');
      } else {
         $("#geStd").prop('checked', false);
      }
   });
   $("select").change(function() {
      if (this.value !== "green") {
         $("#geStd").prop('checked', false);
      }
   });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。