在 div 单击时，切换 select2 下拉菜单

Question

我想在单击具有 ID [=] 的特定 div 时切换 (open/close) select2 select 框的下拉菜单13=]

这是我用来打开下拉选项菜单的代码：

$(document).ready(function() {

$("#clickme").click(function(){
$("#postitemlocation").select2("open");
});

});

但是这个只打开了，select2个下拉菜单。我试过了

$("#postitemlocation").select2("toggle");

但根本不起作用。有什么想法吗？

Answer 1

根据其他人的意见，我找到了一个非常简单的解决方案，可以解决问题。有时简单的方法是最好的。

这是我的代码，以防其他人需要使用 select2 插件的类似功能。

$("#postitemlocation").select2()

$("#clickme1").click(function() {
  $("#postitemlocation").select2("open");
  $("#clickme1").hide();
  $("#clickme2").show();
});

$("#clickme2").click(function() {
  $("#postitemlocation").select2("close");
  $("#clickme1").show();
  $("#clickme2").hide();
});

#clickme1,
#clickme2 {
  float: right;
  margin-right: 50px;
  margin-top: 80px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

#clickme2 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<select id="postitemlocation">
  <option value="">Choose a location</option>
  <option value="1">New York</option>
  <option value="2">London</option>
  <option value="3">Tokyo</option>
  <option value="4">Miami</option>
  <option value="5">Rome</option>
</select>
<div id="clickme1">click me</div>
<div id="clickme2">click me</div>

在 div 单击时，切换 select2 下拉菜单

On div click, toggle select2 dropdown menu

html

jquery

jquery-select2