jquery unordered list multiselect with ctrl

Question

I would like to create a multiselect on unordred list when clicking on on <li> items and holding ctrl key, and when clicking on <li> without holding the ctrl it just select the current item and deselect others.

<div class="list">
    <ul class="level0">
        <li class="level1">text1</li>
        <li class="level1">text2</li>
        <li class="level1">text3</li>
        <li class="level1">text4</li>
        <li class="level1">text5</li>
    </ul>
    <ul class="level0">
        <ul class="level1">
            <li class="level2">text1</li>
            <li class="level2">text2</li>
            <li class="level2">text3</li>
            <li class="level2">text4</li>
            <li class="level2">text5</li>
        </ul>
        <ul class="level1">
            <li class="level2">text1</li>
            <li class="level2">text2</li>
            <li class="level2">text3</li>
            <li class="level2">text4</li>
            <li class="level2">text5</li>
        </ul>
    </ul>
</div>

Any idea to do this?

I suggest - http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/ — Lakshay Dulani, Jun 17 '14 at 11:35
See http://stackoverflow.com/questions/2445613/how-can-i-check-if-key-is-pressed-during-click-event-with-jquery — Esko Piirainen, Jun 17 '14 at 11:39

score 4 · Accepted Answer · answered Jun 17 '14 at 11:39

You can use jquery to check if a modifier key was pressed when listening to an event. You can check for the following keys on the event object passed to the handler:

altKey - alt/option key
ctrlKey - control key
shiftKey - shift key
metaKey - control key on PCs, control and/or command key on Macs

Example:

var lis = $('.list li').click(function(e){
    if(!e.ctrlKey) {
        // Ctrl not pressed, clear previous selections
         lis.removeClass("selected");      
    }
    $(this).addClass("selected");    
});

Working fiddle: http://jsfiddle.net/AM2Sk/

how to prevent Mac from open the list in a new window when use cmd? — TheCrazyProfessor, Nov 01 '17 at 18:17

jquery unordered list multiselect with ctrl

1 Answers1