Search code examples
javascriptjqueryhtmlmultiple-select

raise event after multiple selection with ctrl key


Hi,

I want to trigger an event on an element list. The list may have multiple selection. The event should be triggered directly, if user clicks on element without ctrl key.
If the user presses ctrl+click then, event should be triggered once the selection is done. I have written my own logic for that here.
I can prevent event from triggering immediately after click with combination of ctrl. But I am not getting the idea when to trigger my own function(lets say alert here...) ,if there is multiple selection.


Solution

  • var str = "";
    $(document).ready(function() {
    
        // bind only click event
    
        $('ul > li').on('click', function(event) {
    
            // if ctrl key is press
    
            if (event.ctrlKey) {
                str = str + $(this).text() + ",";
            } else {
                str = $(this).text();
                alert(str);
                str = '';  // after alert reset the str
            }
        });
    
        // bind a keyup event
        $(document).on('keyup', function(event) {
    
            // str is not empty and ctrl key is released
            // show alert
            if(str && !event.ctrlKey) {
                alert(str);
            } 
            str = ''; // after alert reset the str
        });
    });​
    

    DEMO

    Note

    you don't need to maintain any flag for ctrl key press. event.ctrlKey will do this for you.