如何触发下拉框下拉事件

Posted 2023-04-24

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

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包，利用上面的代码，即可实现多选下拉框的需求，截图如下：

成功完美的实现！

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

elementUI 下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）

原文：https://blog.csdn.net/CarryBest/article/details/79959389

今天做项目时，用elementUI框架，需要下拉框隐藏时出发某个函数，用了visible-change这个函数，发现点击时会触发两次我自己定义的函数，看了下官网的解释 ：下拉框出现/隐藏时触发   如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法：
官网定义：
Select Events

 

@visible-change 函数里面传递两个参数（第一个为回调参数，第二个为自己定义的参数）

前台页面：

<el-select v-model="AREACODE" placeholder="请选择" clearable @visible-change="changeValue1($event,AREACODE)"> <el-option v-for="item in AreaOptions" :key="item.AREACODE" :label="item.NAME" :value="item.AREACODE"> </el-option></el-select>

JS:

changeValue1:function(callback,vc) //只有回调参数为false时才触发 ctx.getAreaListDataSearch(vc,1)这个函数;
console.log("回调参数"+callback);
if(!callback)
var ctx = this;
ctx.AREACODE2=‘请选择‘;
if(vc!="")
ctx.show2 = true;
ctx.getAreaListDataSearch(vc,1);


,

　　

这样就解决了这个函数会默认调用两次你自己定义函数的问题