Question

如何触发下拉框下拉事件

Answer 1

下面介绍两种方式，主要给出插件代码：

1，可以手动写js，设置下拉框为多选下拉框。

2，也可以使用对应的插件，比如zui.sexy中chosen插件，非常的专业好用。当然还有其他的前端插件，都是可以用的。

插件代码（对应的js包需要自己导入，这里给出关键实现代码）：

<select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple="">
  <option value="strawberries">草莓</option>
  <option value="apple">苹果</option>
  <option value="orange">橙子</option>
  <option value="cherry">樱桃</option>
  <option value="banana">香蕉</option>
  <option value="figs">无花果</option>
</select>

<!-- 下面的代码为插件的具体实现 -->
$('select.chosen-select').chosen({
    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
    disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
    search_contains: true         // 从任意位置开始检索
});

导入对应的js包，利用上面的代码，即可实现多选下拉框的需求，截图如下：

成功完美的实现！

Answer 2

有个DropDown事件，你在事件列表里可以看到，推荐用这个，因为如果用click的话你在选择的时候还会出发事件，容易造成事件混乱，而且click事件是在鼠标弹起的时候触发，显然不如DropDown