Question

我正在使用multiselect创建一个多选下拉列表，但我面临的问题是当我将鼠标悬停在它上面时，不会显示多选下拉列表。隐藏了引导类中的.dropdown-menu属性。

如上图所示，鼠标悬停时不会打开“未选中”下拉列表。

使用Javascript：

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

HTML代码

<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>

Answer 1

根据作者的文档（Go to documentation），下面的代码可能会解决您的问题，

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

参考：Bootstrap Dropdown with Hover

MultiSelect的替代JavaScript库

<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>

未显示多选的下拉列表

1 个答案: