复选框未显示在下拉列表中 [英] Checkbox is not getting displayed in dropdown
本文介绍了复选框未显示在下拉列表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须从下拉列表中进行多选.所以我提到了这个 链接.但是当我尝试在浏览器中打开这个程序时，我没有看到复选框，也无法选择更多数据.我的脚本看起来像这样
<头><元字符集=utf-8"><元名称=视口"内容=宽度=设备宽度，初始比例=1"><!--样式表--><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";rel=样式表"><link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";rel=样式表"><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css";rel=样式表"><link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css";rel=样式表"><!--JS--><script src=https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><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 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><身体><选择多个><option value=a">a</option><option value=b">b</option><option value=c">c</option></选择><form class="needs-validation";没有验证><选择类=选择"多id=基本选择"数据-MDB-验证=真"；data-mdb-valid-feedback=此值有效"；data-mdb-invalid-feedback=此值无效"；data-mdb-clear-button="true"><option value=1">一个</option><option value=2">两个</option><option value=3">三</option><option value=4">四</option><option value=5">5</option><option value=6">6</option><option value=7">七</option><option value=8">8</option></选择><按钮类型=提交"id="提交"class=btn btn-primary btn-sm mt-3">提交</表单><脚本>(() => {'使用严格';//获取我们想要应用自定义 Bootstrap 验证样式的所有表单const forms = document.querySelectorAll('.needs-validation');//遍历它们并防止提交Array.prototype.slice.call(forms).forEach((form) => {form.addEventListener('submit', (event) => {event.preventDefault();event.stopPropagation();form.classList.add('已验证');}，错误的);});})();</html>我的 chrome 版本是 90.0.在这里，我尝试了两个示例.我可以看到没有复选框显示两个下拉列表.有人可以帮助我如何显示复选框并进行多项选择
解决方案
Display Checkboxes In Dropdown
添加 HTML:
<头><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>选择</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"crossEuK6ys><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPmgJponys"cross.><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-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7"cross<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script><身体><div class="容器"><div class="row"><h4>复选框</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></选择></html>
添加 CSS:
body {字体系列:'Ubuntu'，无衬线；字体粗细:粗体；}.select2-容器{最小宽度:400px；}.select2-results__option {padding-right: 20px;垂直对齐:中间；}.select2-results__option:before {内容: "";显示:内联块；位置:相对；高度:20px；宽度:20px；边框:2px 实心 #e9e9e9;边框半径:4px；背景色:#fff;右边距:20px；垂直对齐:中间；}.select2-results__option[aria-selected=true]:before {字体系列:fontAwesome；内容:\f00c"；颜色:#fff;背景颜色:#f77750；边框:0；显示:内联块；左边距:3px；}.select2-container--default .select2-results__option[aria-selected=true] {背景色:#fff;}.select2-container--default .select2-results__option--highlighted[aria-selected] {背景颜色:#eaeaeb；颜色:#272727；}.select2-container--default .select2-selection--multiple {底边距:10px；}.select2-container--default.select2-container--open.select2-container--下面 .select2-selection--multiple {边框半径:4px；}.select2-container--default.select2-container--focus .select2-selection--multiple {边框颜色:#f77750；边框宽度:2px；}.select2-container--default .select2-selection--multiple {边框宽度:2px；}.select2-container--打开 .select2-dropdown--下面{边框半径:6px；box-shadow: 0 0 10px rgba(0,0,0,0.5);}.select2-selection .select2-selection--multiple:after {内容:'hhghgh';}/* 选择带有图标徽章的单个 */.select-icon .select2-selection__placeholder .badge {显示:无；}.select-icon .placeholder {显示:无；}.select-icon .select2-results__option:before,.select-icon .select2-results__option[aria-selected=true]:before {显示:无！重要；/* 内容: "" !important;*/}.select-icon .select2-search--dropdown {显示:无；}添加 JQuery:
$(".js-select2").select2({closeOnSelect : 假，占位符:占位符"，allowHtml: 真,允许清除:真，标签: true//создает новые опции на лету});$('.icons_select2').select2({宽度:100%"，模板选择:iformat，模板结果:iformat，allowHtml: 真,占位符:占位符"，dropdownParent: $( '.select-icon' ),//обавили класс允许清除:真，倍数:假});功能 iformat(图标，徽章，){var originalOption = icon.element;var originalOptionBadge = $(originalOption).data('badge');return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i>' + icon.text + '<span class="徽章">' + originalOptionBadge + '</span></span>');}像魅力一样工作
I have to do the multi select from the dropdown. So I have referred this link. But when I try to open this program in the browser I dont see tthe checkbox and I cant select more data also. My script looks like this
<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>
My chrome version is 90.0. Here I tried with two examples. I can see two dropdowns are showing without checkbox.Can someone help me how should i show the checkbox and do the multiple selection
解决方案
Display Checkboxes In Dropdown
Add 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>
Add 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;
}
Add 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>');
}
Works Like Charm
这篇关于复选框未显示在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
