Selecting multiple from an html select element without using ctrl key

Question

I've come across various solutions to this issue on the net.

Basically, I find having to hold down ctrl a bit cheesy, and I want the select list to just select whatever I click on and add it to the currently selected items.

I've already got this code:

    $("select[multiple] option").mousedown(function () {
        var $self = $(this);            

        if ($self.attr("selected")) {                
            $self.removeAttr("selected", "");
        }
        else {
            $self.attr("selected", "selected");
        }

        return false;            
    });

Element:

    <select multiple id="WOStatusKey" name="WOStatusKey">                
        <option value="1">Created</option>
        <option value="2">In Process</option>
        <!-- etc. (about 20 of these) -->
    </select>

It works fine with one exception: any time something is selected/deselected that is not at the top of the list (where you have to scroll to see it) then it pops back up to the top after you select it. I've played around with it a little bit but can't figure out anything to prevent this behavior. Also, I've seen a couple other solutions to this problem, although nothing that either works or works well.

I only need this to work in Chrome. Also, I am not interested in any alternative solutions to using a select list.

Thank you for any help, it is much appreciated.

Can you make a fiddle for this so others could also experiment with your code? — aa333
– aa333, Commented Jul 3, 2014 at 2:10
janaspage: on your link, scroll down and click on an option. After selection, the select box will automatically reset the position to be at the very top (as if you scrolled all the way back up). aa333: jsfiddle.net/h5Sw2 — Zatos
– Zatos, Commented Jul 3, 2014 at 18:51

Tony Brix · Accepted Answer · 2016-01-27 02:22:05Z

47

You can save the Element.scrollTop and set it at the end.

$("select").mousedown(function(e){
    e.preventDefault();

    var select = this;
    var scroll = select .scrollTop;

    e.target.selected = !e.target.selected;

    setTimeout(function(){select.scrollTop = scroll;}, 0);

    $(select ).focus();
}).mousemove(function(e){e.preventDefault()});

http://jsfiddle.net/UziTech/cjjg68dr/114/

edited Jan 27, 2016 at 2:22

answered Nov 21, 2014 at 7:14

Tony Brix

4,2817 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Zatos Over a year ago

Thank you sir! I never did find a solution. This works great!

evilReiko Over a year ago

Finally a solution that works! btw, tested it on Safari/Opera/Chrome/FF, doesn't work for FF

Ruben Martinez Jr. Over a year ago

This fiddle doesn't work in the latest Chrome; as the OP described, if you select, say #2, and then scroll down to #9, the select box will auto scroll to #2 again immediately after click.

Tony Brix Over a year ago

I updated the fiddle to set the scrollTop inside a setTimeout so it will update it at the end of the event loop

Noumenon Over a year ago

If you have onChange handlers that preventDefault() is preventing from working, just add $("#mySelect").trigger("change"). You'll still get the Ctrl+click effect.

|

Cassio Ludewigs · Accepted Answer · 2017-02-10 16:43:01Z

8

Tony's answer makes the select arrows buggy, as they work only if you hold the mouse down.

I've combined a few solutions into this, and it works fine at least in Chrome and FF:

// multiple select: selectable without Control
$('select[multiple] option').on('mousedown', function(e) {
    var $this = $(this),
        that = this,
        scroll = that.parentElement.scrollTop;

    e.preventDefault();
    $this.prop('selected', !$this.prop('selected'));

    setTimeout(function() {
        that.parentElement.scrollTop = scroll;
    }, 0);

    return false;
});

answered Feb 10, 2017 at 16:43

Cassio Ludewigs

811 silver badge2 bronze badges

1 Comment

Elsiete Over a year ago

only answer that works on chrome mobile cause it targets the option element

Luke · Accepted Answer · 2015-05-07 19:45:45Z

7

Here is a pure JS solution:

element.onmousedown= function(event) {
    //this == event.target
    event.preventDefault();
    var scroll_offset= this.parentElement.scrollTop;
    this.selected= !this.selected;
    this.parentElement.scrollTop= scroll_offset;
}
element.onmousemove= function(event) {
    event.preventDefault();
}

Look at the parent element(the select box) and record the vertical scroll offset before selecting/deselecting the option. Then reset it manually once you have performed the action.

The reasoning behind preventing default behavior for the mousemove event is because if you don't prevent it and you happen to click an option while moving the mouse, all options will become de-selected.

edited May 7, 2015 at 19:45

answered May 7, 2015 at 19:33

Luke

5,7465 gold badges40 silver badges68 bronze badges

1 Comment

sdo Over a year ago

This works fine. A side effect is that other events may not fire. After adding this, I observed the following: (a) a disabled multiselect select field accepted the selection of options when clicking at an option. (b) An event that has been registered at 'input' did not fire any more.

Adam111p · Accepted Answer · 2020-09-14 08:33:20Z

2

Short quick version

Created In Process

// this is for specyfic id  -> $('#WOStatusKey').

//below for all multiple select
$('select[multiple]').mousedown(e=>{
e.target.selected = !e.target.selected;
e.stopPropagation();
return false;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="WOStatusKey" name="WOStatusKey">                
        <option value="1">Created</option>
        <option value="2">In Process</option>
        <option value="3">Bla bla bla</option>
    </select>

answered Sep 14, 2020 at 8:33

Adam111p

3,7851 gold badge26 silver badges18 bronze badges

2 Comments

Julien Reszka Over a year ago

Would be even better if it displayed a ☑️ when option is selected and a 🔳 when it's not

Julien Reszka Over a year ago

I made a version of this in vanilla js and with checkboxes stackoverflow.com/a/78177261/3374574

Tim Yonker · Accepted Answer · 2016-03-23 14:20:35Z

1

Here's a solution that appears to work in Chrome FF and IE. It's not terribly pretty because it flashes a little bit when clicking.

var vals = [];
$("select[multiple]").click(function(e){
        var scroll_offset= this.scrollTop;
      var newVals = $(this).val();
    if (newVals.length === 1) {
        var index = vals.indexOf(newVals[0])
        if (index > -1) {
        vals.splice(index, 1);
      } else {
        vals.push(newVals[0])
      }
      $(this).val(vals);
      this.scrollTop = scroll_offset;
    }
});

jsfiddle

edited Mar 23, 2016 at 14:20

answered Mar 22, 2016 at 21:34

Tim Yonker

4034 silver badges7 bronze badges

Comments

Steve · Accepted Answer · 2018-11-29 19:50:25Z

1

For a pure js solution in chrome set the event listener on "onmouseup" instead. The event that resets the scroll to the first element is fired on the mouse up. So for example:

element.onmouseup = function(event) {
    event.preventDefault();
    var st = this.scrollTop;
    setTimeout(function () { element.scrollTop = st; }, 0);
};

answered Nov 29, 2018 at 19:50

Steve

1511 gold badge1 silver badge8 bronze badges

Comments

Julien Reszka · Accepted Answer · 2024-03-18 21:29:47Z

This version allows users to see a checked checkbox when the option is selected and an unchecked checkbox when the option is not selected on a desktop device. Mobile device already have checkboxes for select multiple.

const init = function () {
// native mobile select has already checkboxes on both ios and android
  if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    return;
  }

  document.querySelectorAll('select[multiple][checkboxes] option').forEach(option => {
    if (option.selected) {
      option.textContent = '☑️ ' + option.textContent;
    } else {
      option.textContent = '🔳 ' + option.textContent;
    }
  });

  document.querySelector('select[multiple][checkboxes]').addEventListener('mousedown', function (e) {
    e.preventDefault();
    const initialPosition = e.target.parentElement.scrollTop;
    if (e.target.tagName !== 'OPTION') return;
    e.target.selected = !e.target.selected;
    if (e.target.selected) {
      e.target.textContent = e.target.textContent.replace('🔳', '☑️');
    } else if (!e.target.selected) {
      e.target.textContent = e.target.textContent.replace('☑️', '🔳');
    }
    setTimeout(() => {
      e.target.parentElement.scrollTop = initialPosition;
    }, 0);
    e.target.dispatchEvent(new Event('change'));
    return false;

  });
}

init();

<select multiple checkboxes>
  <option value="1" selected>Todo</option>
  <option value="2">In Process</option>
  <option value="3">Done</option>
  <option value="4">Bla bla bla</option>
  <option value="5">Bla bla bla</option>
  <option value="6">Bla bla bla</option>
  <option value="7">Bla bla bla</option>
  <option value="8">Bla bla bla</option>
  <option value="9">Bla bla bla</option>
  <option value="10">Bla bla bla</option>
  <option value="11">Bla bla bla</option>
  <option value="12">Bla bla bla</option>
  <option value="13">Bla bla bla</option>
</select>

VS

<select multiple>
  <option value="1" selected>Todo</option>
  <option value="2">In Process</option>
  <option value="3">Done</option>
  <option value="4">Bla bla bla</option>
  <option value="5">Bla bla bla</option>
  <option value="6">Bla bla bla</option>
  <option value="7">Bla bla bla</option>
  <option value="8">Bla bla bla</option>
  <option value="9">Bla bla bla</option>
  <option value="10">Bla bla bla</option>
  <option value="11">Bla bla bla</option>
  <option value="12">Bla bla bla</option>
  <option value="13">Bla bla bla</option>
</select>

ZPiDER · Accepted Answer · 2019-12-01 22:50:16Z

0

This worked better for me than the other suggestions, because it is vanilla JS and it behaves more similarly to the original still, for example allows quick selection of many items via the shift key.

element.onmousedown = function(event) {
    if (event.shiftKey) return;
    event.preventDefault();
    this.focus();
    var scroll = this.scrollTop;
    event.target.selected = !event.target.selected;
    this.scrollTop = scroll;
    // make sure that other listeners (like Vue) pick up on the change
    // even though we prevented the default.
    this.dispatchEvent(new Event("change"));
}

edited Dec 1, 2019 at 22:50

answered Nov 28, 2019 at 8:55

ZPiDER

4,4721 gold badge20 silver badges18 bronze badges

Collectives™ on Stack Overflow

Selecting multiple from an html select element without using ctrl key

8 Answers 8

14 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

14 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related