I am using this code for my custom select: https://www.w3schools.com/howto/howto_custom_select.asp
I'm also trying to display specific content when an option is selected. I've tried some "swap content" javascript but it doesn't work with this custom select.
In fact it actually works but only with the "original" select element but at the time I put in on display:none to only work with my custom select it's not working anymore,
If someone has a code to display specific content with this custom select options I would appreciate
Otherwise here is my test code if you need it :
/*Button list*/
$(document).ready(function(){
$(".custom-select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".liste").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".liste").hide();
}
});
}).change();
});
/*Btn Content display*/
jQuery(function(){;
$('.swap-button').click(function(){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).show();
$('.swap-button').removeClass("active");
$(this).addClass("active");
});
});
/*Custom select*/
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);/*Buttons list*/
.liste {
display:none;
margin: 15px 15px;
}
.targetDiv {
display:none;
margin: 15px 15px;
}
.swap-button{
display:inline-block;
background:#ffff;
cursor:pointer;
color: #00205b;
}
.active{
background:#00205B;
color: #eee;
display:inline;
}
/* Custom select: */
/* The container must be positioned relative: */
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: ; /*hide original SELECT element: */
}
.select-selected {
background-color: DodgerBlue;
width: 50px;
margin: 10px;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 5px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
width: 150px;
}
/* Style items (options): */
.select-items {
position: absolute;
padding: 8px 5px;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
width: 150px;
margin: 10px ;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select">
<select>
<option value="">Select</option>
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="apple">Apple</option>
</select>
</div>
<div>
<div class="liste orange">
<button class="swap-button" target="1">orange btn1</button>
<button class="swap-button" target="2">orange btn2</button>
<button class="swap-button" target="3">orange btn3</button>
</div>
<div class="liste lemon">
<button class="swap-button" target="4">lemon btn1</button>
<button class="swap-button" target="5">lemon btn2</button>
<button class="swap-button" target="6">lemon btn3</button>
</div>
<div class="liste apple">
<button class="swap-button" target="7">apple btn1</button>
<button class="swap-button" target="8">apple btn2</button>
<button class="swap-button" target="9">apple btn3</button>
</div>
</div>
<div id="contentarea">
<section>
<div id="div1" class="targetDiv">orange btn1 content</div>
<div id="div2" class="targetDiv">orange btn2 content</div>
<div id="div3" class="targetDiv">orange btn3 content</div>
</section>
<section>
<div id="div4" class="targetDiv">lemon btn1 content</div>
<div id="div5" class="targetDiv">lemon btn2 content</div>
<div id="div6" class="targetDiv">lemon btn3 content</div>
</section>
<section>
<div id="div7" class="targetDiv">apple btn1 content</div>
<div id="div8" class="targetDiv">apple btn2 content</div>
<div id="div9" class="targetDiv">apple btn3 content</div>
</section>
</div>Thanks