Selecting Multiple from an HTML Select Element Without Using Ctrl Key

Selecting multiple from an html select element without using ctrl key

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/

How to avoid the need for ctrl-click in a multi-select box using Javascript?

Check this fiddle: http://jsfiddle.net/xQqbR/1022/

You basically need to override the mousedown event for each <option> and toggle the selected property there.

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

For simplicity, I've given 'option' as the selector above. You can fine tune it to match <option>s under specific <select> element(s). For ex: $('#mymultiselect option')

html Select multiple option with simple click without pressing CTRL button

I think you want somethings like this :

$('select[multiple]').multiselect()

<!DOCTYPE html><html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head><body>
<select multiple="multiple">    <option value="cheese">Cheese</option>    <option value="tomatoes">Tomatoes</option>    <option value="mozarella">Mozzarella</option>    <option value="mushrooms">Mushrooms</option>    <option value="pepperoni">Pepperoni</option>    <option value="onions">Onions</option></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script></body></html>

Angular 5 - Multiselect without pressing the Ctrl key

I don't know if this can help but maybe you can use JQuery to do that.
Please refer to this answer:

https://stackoverflow.com/a/27056015/9220387

Here is the code in JQuery:

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

in full Javascript:

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.

UPDATE

You can try this solution, I don't know if there is a better solution but mine works. Change your onMouseDown method to :

  public onMouseDown(event: MouseEvent, item) {
    event.preventDefault();
    event.target['selected'] = !event.target['selected'];
    if(event.target['selected']) {
      this.productForm.value.items.push(item.id);
    } else {
      let index: number = -1;
      index = this.productForm.value.items.indexOf(item.id);
      if(index > -1) {
          this.productForm.value.items.splice(index);
      }
    }
  }

I don't think that you can have a fully and native binded data with this kind of selector (because of the preventDefault).
Of course you have to change your html to this :

<div class="form-group">
    <select multiple="multiple" class="form-control" id="items" formControlName="items" required>
      <option (mousedown)="onMouseDown($event, item)" (mousemove)="$event.preventDefault()" *ngFor="let item of itemList" [value]="item.id">{{item.name}}</option>
    </select>
</div>

How to select multiple values without ctrl key when select values are loaded dynamically as a function of another select

I think the main problem is that the values are dynamically updated, at the time your code runs select probably is empty. You can shorten the script a lot more by merging the functions in one.

$(function(){ // this is short for $(document).ready()
     function applyMultiSelection (){
         $("#models").MultiSelect({
             css_class_selected: "multi-selection"
         });
     };
});

If you cannot edit the script to add a trigger event or something similar I could suggest using the following plugin.

https://github.com/hazzik/livequery/blob/master/jquery.livequery.js

This plugin will check if there are new option elements added or created. Now every time you dynamically add new elements the plugin should run .MultiSelect()

$(function(){ 
   $("#models option").livequery(function () {
       $("#models").MultiSelect({
             css_class_selected: "multi-selection"
       });
   });
});

Here's a test fiddle

Selecting Multiple from an HTML Select Element Without Using Ctrl Key