![](/img/trans.png)
[英]How can I add multiselect.js or sumoselect for checkbox dropdown
[英]How can I add columns to jQuery select2 js multiselect dropdown
我有一個使用 jQuery select2 js 庫的多選下拉列表,列表項是關於葯物的。
我想在任何選定的葯物之后添加一個新列,以輸入患者應該在“早上”-“晚上”-“晚上”使用該葯物的次數
另外用一列 header 來放列標簽。
更新 #1 - 最終結果預覽:
這就是我想要的最終結果:
更新 #2 - 初始代碼:
HTML:
<div class="symptoms drugs">
<div class="col-lg-4 mg-b-20 mg-lg-b-0" style="width: 100%; padding-left: 0">
<div class="d-flex align-items-center">
<h3 class="diagnose_heading custom_heading" style="margin-bottom: 1rem; margin-top: 1rem">
Medical Drugs:
</h3>
<span class="tx-danger span_required">(*) Required</span>
</div>
<select class="form-control select2" multiple="multiple" style="width: 100%" name="symptoms[]">
<option value="1">drug name 1</option>
<option value="2">drug name 2</option>
<option value="3">drug name 3</option>
<option value="4">drug name 4</option>
<option value="5">drug name 5</option>
</select>
</div>
</div>
JavaScript 代碼:
<script src="jquery.min.js"></script>
<script src="select2.js"></script>
<script>
var items = $(".select2").find(":selected");
$(".select2").select2({
// ...
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
$(data.element).attr("data-custom-attribute", data.customValue);
return data.text;
},
});
</script>
CSS:
<link rel="stylesheet" href="select2.min.css" />
<style>
.select2-container {
width: 100% !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
float: left !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
left: auto !important;
right: 0 !important;
}
.symptoms .select2-container {
width: 76.5vw !important;
}
.drugs .select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
padding: 0.3rem 0.5rem 0.5rem !important;
flex-direction: column;
cursor: pointer;
}
.drugs .select2-container--default .select2-selection--multiple .select2-selection__choice {
float: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
font-size: 1rem !important;
top: 2px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
width: 76.5vw !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
width: 100% !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
padding-left: 2rem !important;
}
.symptoms {
position: relative;
}
.symptoms::before {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background-image: url("/assets/img/patterns/04.png");
opacity: 0.3;
background-size: contain;
}
.initial_diagnose label {
position: relative;
}
.initial_diagnose label::before {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background-image: url("/assets/img/patterns/04.png");
opacity: 0.3;
background-size: cover;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
float: left !important;
background-color: #1199eec7 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #1199eec7 !important;
}
</style>
我想出了解決辦法,
我在 select 標簽下創建了一個表格
<table class="target" cellSpacing="0" cellPadding="0"> </table>
在 select2.js 的初始代碼之后的 JavaScript
$(".select2").select2({
placeholder: "Select a value",
// ...
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
$(data.element).attr("data-custom-attribute", data.customValue);
return data.text;
},
});
我添加了這些代碼行:
$(".select2").on('change', function(e){
let elementsVal = $('.select2').select2().val();
var items = $(".select2").find(":selected");
$('.target').css('display','table');
$('.target').children('tr').remove();
$('.target').append("<tr class='target_column_div'>"+
"<th>Value</th>"+
"<th>Text</th>"+
"<th>Morning</th>"+
"<th>Evening</th>"+
"<th>Night</th>"
+"</tr>");
for(let i=0; i<elementsVal.length; i++) {
$('.target').append(
"<tr class='target_div'>" +
"<td class='target_item'>" + elementsVal[i] + "</td>" +
"<td class='target_item'>" + 'item of value ' + items[i].innerText + "</td>" +
"<td><input type='number' class='target_item_input' /></td>" +
"<td><input type='number' class='target_item_input' /></td>" +
"<td><input type='number' class='target_item_input' /></td>" +
"</tr>"
)
}
});
我還添加了一些 CSS styles 到它:
.target {
margin-top: 1rem;
background-color: #eee;
padding: .5rem;
width: 100%;
position: relative;
display: none;
text-align:center;
}
.target_div {
}
.target_column_div > th,
.target_div > td {
border:1px solid #444;
padding: .5rem;
}
.target_div:nth-last-child(1) {
margin-bottom: 0;
}
.target_item {
/* display: block; */
background-color: bisque;
padding: .5rem 1rem;
font-weight: bold;
}
.select2 {
font-weight: bold;
}
.target_item_input {
padding: .4rem .8rem;
border-radius: 1rem;
outline: none;
text-align: center;
border: 2px solid #1199eec7;
font-weight: bold;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.