javascript - How to trigger a change event only after all multiselect selections have been made - Stack Overflow

admin 管理员组

文章数量: 1086019

I have a multiselect dropdown element with check boxes and a change function for that element in my javascript file. But the change function is triggered every time a check box is clicked. I would like the change function to be triggered only after the user exits the select dropdown or hits 'enter' so it only runs once if a user checks five boxes instead of running five times (immediately after each new box is checked). How can I do this? Here is my current code:

html element:

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

javascript dynamic addition of checkbox options:

$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 change function:

$('#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
    }
});

I have a multiselect dropdown element with check boxes and a change function for that element in my javascript file. But the change function is triggered every time a check box is clicked. I would like the change function to be triggered only after the user exits the select dropdown or hits 'enter' so it only runs once if a user checks five boxes instead of running five times (immediately after each new box is checked). How can I do this? Here is my current code:

html element:

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

javascript dynamic addition of checkbox options:

$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 change function:

$('#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
    }
});

• javascript
• jquery
• onchange
• multi-select

Share Improve this question Follow edited Feb 25, 2017 at 17:09 Mark Schultheiss 34.2k1212 gold badges7272 silver badges113113 bronze badges asked Feb 25, 2017 at 16:40 David LewineDavid Lewine 14111 gold badge22 silver badges1414 bronze badges 1

• Possible duplicate of Javascript - Which event to use for multiselect change – Vivek Athalye Commented Feb 25, 2017 at 16:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can execute your js function on a button click with button click event like

$('#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
    }
});

So it will get fired only when user want to submit after selecting multiple values from dropdown.

OR

If you still need to execute it on change event of dropdown when 5 items are selected then you can get count of the selected values and fire the function if selected items are equal to 5

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

See fiddle : https://jsfiddle/4zabsa9e/7/

Maybe you are looking for a delay, so that if several changes are made within a short time, your code only executes after the last one:

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

So only trigger when the select looses focus/blur perhaps?:

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

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).

IF you manually change values via script, you can trigger the event:

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

本文标签： javascriptHow to trigger a change event only after all multiselect selections have been madeStack Overflow