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

我有一个多选下拉元素，其中包含复选框和该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 
    } 
});

来源

2017-02-25 David Lewine

[使用Javascript - 要使用的事件多选变更]的可能的复制（http://stackoverflow.com/questions/1816755/javascript-which-event-to-use-for-multislect-change） –

您可以执行你的js按钮上的功能点击按钮click event像

$('#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/

来源

2017-02-25 16:47:22

也许你正在寻找一个延迟，所以，如果有几个变化在很短的时间内，你的代码只有最后Ø后执行NE：

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 
});

来源

2017-02-25 16:50:19 trincot

所以仅触发当选择失去聚焦/模糊也许?:

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

该事件的内容的事件被发送到一个元素时，或任何元件在它的内部，失去了重点。这与中的模糊事件不同，它支持检测父元素的焦点丢失（在中，即支持事件冒泡）。

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

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

来源

2017-02-25 17:17:28

这是我想要的解决方案。其他解决方案（如使用计时器或添加另一个按钮以在用户完成选择时进行点击）并不理想，但可能需要做。我无法使用我正在使用的元素“专注”解决方案。只要点击子复选框元素，父元素就会失去焦点，并且只要用户移到下一个复选框，复选框元素就会失去焦点。我需要一些元素在用户选择复选框的整个过程中保持对焦状态，然后只有在退出下拉菜单时才会失去焦点。 –

考虑使用一些自定义事件并在需要时触发。 –

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

回答

相关问题