事件不使用jQuery选择单个Select2

Question

我有一个具有两个选择语句的表单，一个使用select2 a select和一个选择。需要获取最后一项选项的价值，以便我可以进行Ajax调用以填充其他表单。我创建了一个简单的示例，几乎直接从他们的文档中脱颖而出，但它不起作用。请参阅此处https://codepen.io/riskiii/pen/zxjljy

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<form class="signup-form-container" method="post" id="roles-form" name="roles-form">
  <select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
</form>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
$(".js-example-basic-single").on("select2:select", function(e) {
  var data = e.params.data;
  console.log(data);
  alert("hello");
});

Answer 1

在这里，还添加了一些检查是否没有选择。如果需要，帮助重置其他select。

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
  $(".js-example-basic-single").select2();
  $(".js-example-basic-single").on("change", function(e) {
    var data = $(this).val();
    if (data == 0) {
    alert("nothing selected");
    } else {
    console.log(data);
    alert(data);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<form class="signup-form-container" method="post" id="roles-form" name="roles-form">
  <select class="js-example-basic-single" name="state">
  <option value="0">pick one</option>
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
</form>