复选框未显示在下拉列表中
Posted
技术标签:
【中文标题】复选框未显示在下拉列表中【英文标题】：Checkbox is not getting displayed in dropdown 【发布时间】：2021-08-01 20:24:19 【问题描述】：我必须从下拉列表中进行多选。所以我推荐了这个link。但是当我尝试在浏览器中打开这个程序时，我看不到复选框，我也无法选择更多数据。 我的脚本是这样的
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Stylesheets-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<form class="needs-validation" novalidate>
<select
class="select" multiple
id="basic-select"
data-mdb-validation="true"
data-mdb-valid-feedback="This value is valid"
data-mdb-invalid-feedback="This value is invalid"
data-mdb-clear-button="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<button type="submit" id="submit" class="btn btn-primary btn-sm mt-3">
Submit
</button>
</form>
<script>
(() =>
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) =>
form.addEventListener('submit', (event) =>
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
,false);
);
)();
</script>
</body>
</html>
我的 chrome 版本是 90.0。 在这里，我尝试了两个示例。我可以看到两个下拉菜单显示没有复选框。有人可以帮助我如何显示复选框并进行多项选择
【问题讨论】：
您使用的是专业版吗？因为根据docs，这是必需的：“注意：此组件需要 MDBootstrap Pro 软件包。” 如果你想在多重选择中像 mdb 所示的下拉菜单，你需要包含 mdb 的库。 【参考方案1】：在下拉菜单中显示复选框
添加 HTML：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>SELECT</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="select222.css">
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h4>checkbox</h4>
<select class="js-select2" multiple="multiple">
<option value="O1" data-badge="">Option1</option>
<option value="O2" data-badge="">Option2</option>
<option value="O3" data-badge="">Option3</option>
<option value="O4" data-badge="">Option4</option>
<option value="O5" data-badge="">Option5</option>
<option value="O6" data-badge="">Option6</option>
<option value="O7" data-badge="">Option7</option>
<option value="O8" data-badge="">Option8</option>
<option value="O9" data-badge="">Option9</option>
<option value="O10" data-badge="">Option10</option>
<option value="O11" data-badge="">Option11</option>
<option value="O12" data-badge="">Option12</option>
<option value="O13" data-badge="">Option13</option>
</select>
</div>
</div>
</body>
</html>添加 CSS：
body
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
.select2-container
min-width: 400px;
.select2-results__option
padding-right: 20px;
vertical-align: middle;
.select2-results__option:before
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
border-radius: 4px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
.select2-results__option[aria-selected=true]:before
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #f77750;
border: 0;
display: inline-block;
padding-left: 3px;
.select2-container--default .select2-results__option[aria-selected=true]
background-color: #fff;
.select2-container--default .select2-results__option--highlighted[aria-selected]
background-color: #eaeaeb;
color: #272727;
.select2-container--default .select2-selection--multiple
margin-bottom: 10px;
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple
border-radius: 4px;
.select2-container--default.select2-container--focus .select2-selection--multiple
border-color: #f77750;
border-width: 2px;
.select2-container--default .select2-selection--multiple
border-width: 2px;
.select2-container--open .select2-dropdown--below
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
.select2-selection .select2-selection--multiple:after
content: 'hhghgh';
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge
display: none;
.select-icon .placeholder
display: none;
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before
display: none !important;
/* content: "" !important; */
.select-icon .select2-search--dropdown
display: none;
添加 JQuery：
$(".js-select2").select2(
closeOnSelect : false,
placeholder : "Placeholder",
allowHtml: true,
allowClear: true,
tags: true // создает новые опции на лету
);
$('.icons_select2').select2(
width: "100%",
templateSelection: iformat,
templateResult: iformat,
allowHtml: true,
placeholder: "Placeholder",
dropdownParent: $( '.select-icon' ),//обавили класс
allowClear: true,
multiple: false
);
function iformat(icon, badge,)
var originalOption = icon.element;
var originalOptionBadge = $(originalOption).data('badge');
return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
像魅力一样工作
【讨论】：
嗨，我试过你的脚本。我只能看到选项 1、2、3、4。我无法选择任何内容，也没有看到任何复选框 我刚刚更新了脚本，这符合您的要求。 想在这里玩代码检查：codepen.io/faur/pen/vWVPGE以上是关于复选框未显示在下拉列表中的主要内容，如果未能解决你的问题，请参考以下文章
什么是 jQuery，我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值