如何触发下拉框下拉事件

JavaScript06

如何触发下拉框下拉事件,第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包,利用上面的代码,即可实现多选下拉框的需求,截图如下:

成功完美的实现!

可以使用jQuery的trigger() 方法来响应事件

定义和用法

trigger() 方法触发被选元素的指定事件类型。

语法

$(selector).trigger(event,[param1,param2,...])

参数描述

event必需。规定指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。

[param1,param2,...]可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

实例:

触发 select元素的change事件:

$("button").click(function(){

$("select").trigger("change")

})