The dropdown list on multiselect is not being displayed

Question

I am creating a multiselect dropdown using multiselect but the issue I am facing is that the multiselect dropdown is not being displayed when I hover over it. .dropdown-menu property in the bootstrap class is hidden.

As in the above image the 'none selected' dropdown does not open on mouse hover.

Javascript:

  $(function () {
    $('[id*=multidropdown]').multiselect({
    includeSelectAllOption: true
    });
  });

HTML code

<select id="multidropdown" class="multiselect-ui form-control" multiple="multiple" >
  @foreach (var item in clients)
  {
      <option value=@item.ToString() class="col-md-5"> @item.ToString() </option>
  }
</select>

Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Rory McCrossan, Jan 23 '18 at 10:17
can you check if the foreach loop has printed the options correctly? — Praneeth Nidarshan, Jan 23 '18 at 10:36
Yes the options are printed correctly, as I printed the list on console.log() but not on the mouse hover. @PraneethNidarshan — coder_24, Jan 23 '18 at 10:37
@NidaTariq try printing item without appending function in select option. — Kannan K, Jan 23 '18 at 10:41
That doesn't solve the problem. Even hard coded options are not being displayed on mouse hover. @KannanK — coder_24, Jan 23 '18 at 10:43

Praneeth Nidarshan · Answer 1 · 2018-01-23T14:55:08.973

According to the author's documentation (Go to documentation), below code might solve your problem,

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Refer: Bootstrap Dropdown with Hover

Alternative JavaScript Library for MultiSelect

<html>
      <head>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" integrity="sha256-anbXVHwk7ydg+eebPilO8853eq2BLHapi0RjUwqWdpo=" crossorigin="anonymous" />
      </head>
      <body>
        <select multiple="multiple" id="my-select" name="my-select[]">
          <option value='elem_1'>elem 1</option>
          <option value='elem_2'>elem 2</option>
          <option value='elem_3'>elem 3</option>
          <option value='elem_4'>elem 4</option>
          <option value='elem_100'>elem 100</option>
        </select>
        <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script>
            $('#my-select').multiSelect({includeSelectAllOption: true});
        </script>
      </body>
    </html>

It gives the error TypeError: $(...).multiSelect is not a function — coder_24, Jan 23 '18 at 11:06
I am using the David Stutz' Multiselect plugin for multiselect — coder_24, Jan 23 '18 at 14:37
check this url https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover — Praneeth Nidarshan, Jan 23 '18 at 14:55

The dropdown list on multiselect is not being displayed

1 Answers1