내 사용자 지정 선택에이 코드를 사용하고 있습니다 : https://www.w3schools.com/howto/howto_custom_select.asp
또한 옵션을 선택하면 특정 콘텐츠를 표시하려고합니다. 일부 "스왑 콘텐츠"자바 스크립트를 시도했지만이 사용자 지정 선택에서 작동하지 않습니다.
실제로 실제로 작동하지만 "원본"선택 요소에서만 작동하지만 디스플레이에 넣을 때 : 내 사용자 지정 선택에서만 작동하지 않습니다. 더 이상 작동하지 않습니다.
누군가이 사용자 지정 선택 옵션으로 특정 콘텐츠를 표시하는 코드가 있다면 감사하겠습니다.
그렇지 않으면 필요한 경우 내 테스트 코드가 있습니다.
/*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>감사
이 스 니펫을 확인하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
/*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);
}
</style>
</head>
<body>
<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>
<script type="text/javascript">
function func(select){
$(select).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".liste").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".liste").hide();
}
});
}
/*Button list*/
$(document).ready(function(){
$(".custom-select").change(function(){
func(this);
}).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;
}
}
func(s);
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);
</script>
</body>
</html>의 $(".custom-select").change()기능이 function으로 이동되었습니다 func(select). 여기서 select는 HTML <select>태그에 대한 참조 입니다. 이것은 코드 복제를 방지합니다.
s는 select 요소를 참조하므로 내부 에서 s를 인수로 사용하여 c.addEventListener("click", function(e)새로 생성 된 함수 func(s)를 호출했습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다