jobananada,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.product-sizes {
border-bottom: 1px solid #bbb;
text-align: center;
padding-bottom: 13px;
padding-top: 12px;
margin-bottom: 13px;
}
.product-size.selected:hover {
color: #fff;
}
.product-sizes span.selected {
border: 1px solid #fa6f57;
background: #fa6f57;
color: #fff;
}
.product-sizes span.selected:hover {
color: #fff;
}
.product-sizes span:hover {
border: 1px solid #fa6f57;
color: #fa6f57;
}
.product-sizes span{
color: #1f1f1f;
border: 1px solid #1f1f1f;
font-size: 14px;
width: auto;
line-height: 30px;
display: inline-block;
border-radius: 3px;
margin-right: 12px;
margin-bottom: 12px;
padding: 0 4px;
min-width: 32px;
cursor: pointer;
}
</style>
<script>
class ShowSize {
constructor(arr, cls){
this.arr = arr;
this.cls = cls;
this.length = arr.length;
this.current = 0;
this.parent = document.querySelector(cls);
this.spans = this.createElems(this.length, "span");
this.spans.forEach((el,i) => {
el.textContent = arr[i].toUpperCase();
el.dataset.index = i;
})
this.parent.append(...this.spans);
this.select = this.createElems(1, "select")[0];
this.select.name="size";
this.options = this.createElems(this.length, "option");
this.options.forEach((el,i) => {
el.textContent = arr[i].toUpperCase();
el.value = arr[i];
})
this.select.append(...this.options);
this.parent.append(this.select);
this.parent.addEventListener("pointerdown", this.eventHandler.bind(this));
this.parent.addEventListener("pointerup", this.eventHandler.bind(this));
this.setIndex(0)
}
createElems(length, tagName) {
let elems = Array.from({length}, (v,k) => document.createElement(tagName));
return elems
}
setIndex(index){
this.spans[this.current].classList.remove("selected");
this.spans[index].classList.add("selected");
this.select.value = this.arr[index];
this.current = index;
}
eventHandler({target, type}) {
if(type == "pointerdown" && target.closest(this.cls + ">span")){
const index = target.dataset.index;
this.setIndex(index)
}
else if(type == "pointerup" && target == this.select) {
const index = this.arr.indexOf(target.value) ;
this.setIndex(index)
}
}
}
let mass= ["s","l","x","xl","xxl"];
document.addEventListener("DOMContentLoaded", function(){
new ShowSize(mass, ".product-sizes")
})
</script>
</head>
<body>
<div class="product-sizes"></div>
</body>
</html>