Getting JS Script to work with multiple select drop down

Question

I found two threads which answer my question of what code to use. However I have been searching here and the rest of the internet for something to demonstrate how to get the script to run. I have almost no experience with JavaScript which is probably why I can't get this.

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

Selecting multiple from an html select element without using ctrl key

The code that I wish to use is

<script>
$(document).ready(function(){
    $('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();
    });
    $('select').mousemove(function(e){
        e.preventDefault();
    });
});
</script>

However I have no idea on how to get it to work with a multiple select dropdown menu. The example drop down that I have been using to try and figure out how to get this to work is:

<form id="AddProductForm" name="AddProductForm" method="POST">
<select id = "practice" name="practice" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

I don't understand how to get the script to run so that when I click on one of the options I don't need to hold ctrl down to select multiple.

Any help will much appreciated. Thanks!!

EDIT:

I have been looking at the two links and I have a page with the code on it but when I run it I still have to hold ctrl to be able to select multiple options.

I don't get why it doesn't work then, cause I've been looking at those pages for a few hours now. — Alex Dunham, Aug 10 '16 at 20:07
Updated the answer with your javascript code (remember, the javascript code must be **after** the select tag). — Jose Manuel Abarca Rodríguez, Aug 11 '16 at 14:47

Jose Manuel Abarca Rodríguez · Accepted Answer · 2016-08-11T14:47:01.953

The javascript code must be AFTER the select tag. Copy-paste next code in a HTML file and open it in your browser:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <select id="practice" name="practice" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>

<script type = "text/javascript">
$(document).ready(function(){
    $('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();
    });
    $('select').mousemove(function(e){
        e.preventDefault();
    });
});
</script>

  </body>
</html>

Thank you so much, I just needed to see what it would look like and you seem to be the only one who was willing to do that. — Alex Dunham, Aug 14 '16 at 15:19

Getting JS Script to work with multiple select drop down

1 Answers1