Question

我有一个多选下拉元素，带有复选框和我的javascript文件中该元素的更改功能。但是每次单击复选框时都会触发更改功能。我希望只有在用户退出选择下拉菜单或点击“输入”后才会触发更改功能，因此如果用户检查五个方框而不是运行五次（在每个新方框选中后立即执行），它只会运行一次。我怎样才能做到这一点？这是我目前的代码：

html元素：

 <select id="vo_select_mobile_brands" multiple="multiple">
         <option>Select a country</option>
    </select>

javascript动态添加复选框选项：

$el = $('#vo_select_mobile_brands');
$el.empty()
$.each(_vo_mobile_brand_ids_list, function(idx, mobile_brand_id) {
    $el.append($("<option></option>")
        .attr("value", mobile_brand_id).text(mobile_brand_id));
});
$el.multiselect('destroy')
$el.multiselect({
    includeSelectAllOption: true
});
$el.multiselect()

javascript更改功能：

$('#vo_select_mobile_brands').change(function() {
    _vo_selected_mobile_brands = [];
    selected_objects = $("#vo_select_mobile_brands option:selected")
    for(var i = 0; i < selected_objects.length; i++){
        //do something with the selected items
    }
});

Answer 1

您可以使用按钮click event按

按钮执行js功能

$('#ButtonID').click(function() {
    _vo_selected_mobile_brands = [];
    selected_objects = $("#vo_select_mobile_brands option:selected")
    for(var i = 0; i < selected_objects.length; i++){
        //do something with the selected items
    }
});

因此，只有当用户想要从下拉列表中选择多个值后提交时才会被触发。

或

如果您仍然需要在选择了5个项目时在下拉列表的更改事件中执行它，那么您可以获取所选值的计数并在所选项目等于5时触发该函数

$('#vo_select_mobile_brands').change(function() { var count = $("#vo_select_mobile_brands :selected").length; if(count==5) alert(count); });

请参阅小提琴：https://jsfiddle.net/4zabsa9e/7/

Answer 2

也许您正在寻找延迟，因此如果在短时间内进行了多次更改，您的代码只会在最后一次之后执行：

var timer = null;
$('#vo_select_mobile_brands').change(function() {
    clearTimeout(timer); // cancel and restart timer
    timer = setTimeout(function () {
        _vo_selected_mobile_brands = [];
        selected_objects = $("#vo_select_mobile_brands option:selected")
        for(var i = 0; i < selected_objects.length; i++){
            //do something with the selected items
        }
    }, 1000); // after one second of idle time
});

Answer 3

所以只有当选择失去焦点/模糊时才触发？：

$("#vo_select_mobile_brands").on('focusout blur',function(){
    //will return an array of the values for the selected options
    var myselectedvalues = $(this).val();
});

当焦点输出事件或任何元素发送到元素时在里面，失去焦点。这与模糊事件不同它支持检测父元素的焦点丢失（in 换句话说，它支持事件冒泡。

如果您通过脚本手动更改值，则可以触发事件：

$("#vo_select_mobile_brands").trigger("focusout");

如何在完成所有多选选择后触发更改事件

3 个答案: