gpt4 book ai didi

javascript - 多选下拉列表未显示

转载 作者:行者123 更新时间:2023-11-28 17:07:40 24 4
gpt4 key购买 nike

我正在使用 multiselect 创建一个 multiselect 下拉列表,但我面临的问题是当我将鼠标悬停在它上面时,multiselect 下拉列表没有显示。 Bootstrap 类中的 .dropdown-menu 属性是隐藏的。 enter image description here

如上图所示,“未选择”下拉菜单不会在鼠标悬停时打开。

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>

最佳答案

根据作者的文档(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>

关于javascript - 多选下拉列表未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48399132/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com