Skip to content

Instantly share code, notes, and snippets.

@ajid2
Created Jul 5, 2021
Embed
What would you like to do?
select2.js awesome
<!DOCTYPE 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=edge" />
<title>Static Template</title>
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
rel="stylesheet"
/>
<style>
table,
td,
th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 15px;
}
section {
width: 75%;
margin: auto;
}
</style>
</head>
<body>
<section class="form">
<select class="select2" style="width: 100%;" multiple>
<option value="">Pilih Warna</option>
<option value="orange">orange</option>
<option value="white">white</option>
<option value="purple">purple</option>
</select>
</section>
<br />
<br />
<section class="form" style="display: none;">
<select class="select-ukuran" style="width: 100%;" multiple>
<option value="">Pilih Ukuran</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</section>
<section class="table" style="margin-top: 20px;">
<table style="display: none;">
<tbody></tbody>
</table>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var WARNA = [];
var UKURAN = [];
$(".select2").select2({
tags: false,
placeholder: "Pilih warna"
});
$(".select-ukuran").select2({
tags: false,
placeholder: "Pilih ukuran"
});
$('.select-ukuran').on('select2:select', (e) => {
let {data} = e.params;
UKURAN.push(`${data.text}`)
WARNA.forEach((v,i) => {
$(`#tr-${v} td:nth-child(2)`).remove();
$(`#tr-${v}`).append(`<td class="ukuran">${data.text}</td>`)
$(`#tr-${v}`).attr('id', `tr-${v}-${data.text}`)
if (UKURAN.length > 1) {
let html = '';
html += `<tr id="tr-${v}-${data.text}">`;
html += `<td>${v}</td>`;
html += `<td class="ukuran">${data.text}</td>`;
html += "</tr>";
$("tbody").append(html);
}
})
})
$(".select-ukuran").on("select2:unselect", (e) => {
if (UKURAN.length > 1) {
$(`[id*='tr'][id$=${e.params.data.text}]`).remove()
}else{
$(`[id*='tr'][id$=${e.params.data.text}]`).each((i,v) => {
let valueOfWarna = $(v).attr('id').split('-')[1];
$(v).attr('id', `tr-${valueOfWarna}`)
})
$('.ukuran').remove()
}
UKURAN.remove(`${e.params.data.text}`)
})
$(".select2").on("select2:select", function (e) {
var data = e.params.data;
let html = "";
$("table").show();
html += `<tr id="tr-${data.text}">`;
html += `<td>${data.text}</td>`;
html += "</tr>";
if (UKURAN.length < 1) {
$("tbody").append(html);
}else{
let newtr = '';
UKURAN.forEach((v,i) => {
newtr += `<tr id="tr-${data.text}-${v}">`;
newtr += `<td>${data.text}</td>`;
newtr += `<td class="ukuran">${v}</td>`;
newtr += '</tr>';
})
$("tbody").append(newtr);
}
WARNA.push(`${data.text}`)
if (WARNA.length >= 1) $('.select-ukuran').parent().show();
});
$(".select2").on("select2:unselect", (e) => {
$(`[id^=tr-${e.params.data.text}]`).remove();
WARNA.remove(`${e.params.data.text}`)
if (WARNA.length < 1) $('.select-ukuran').parent().hide();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment