You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.2 KiB
88 lines
2.2 KiB
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<style>
|
|
|
|
</style>
|
|
<link rel="stylesheet" href="select3.css">
|
|
<div class="select3">
|
|
<div class="input">
|
|
<span>請選擇</span>
|
|
<i class="fa-solid fa-chevron-down"></i>
|
|
</div>
|
|
<div class="select">
|
|
<input type="text" />
|
|
<div class="options">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const select3 =document.querySelector('.select3');
|
|
const inputArr = [{
|
|
value:'123',
|
|
name:'123',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'456',
|
|
name:'456',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'789',
|
|
name:'789',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'111',
|
|
name:'111',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'555',
|
|
name:'555',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'989',
|
|
name:'989',
|
|
check:false,
|
|
},
|
|
{
|
|
value:'000',
|
|
name:'000',
|
|
check:false,
|
|
}];
|
|
const result = [];
|
|
const showSelect = (e)=>{
|
|
console.log(e.target);
|
|
if(e.target.parentNode.querySelector('.select').style.display == 'block'){
|
|
e.target.parentNode.querySelector('.select').style.display = "none"
|
|
}else{
|
|
e.target.parentNode.querySelector('.select').style.display = "block"
|
|
}
|
|
}
|
|
let html ="";
|
|
select3.querySelector('.input').addEventListener('click', showSelect)
|
|
|
|
inputArr.forEach(item=>{
|
|
html += `<label class="option">
|
|
<span>${item.name}</span>
|
|
</label>`
|
|
})
|
|
console.log(select3.querySelector('.options'));
|
|
const options = select3.querySelector('.options');
|
|
options.innerHTML = html;
|
|
|
|
for(let i=0;i<options.querySelectorAll('.option').length;i++){
|
|
options.querySelectorAll('.option')[i].addEventListener('click', checkFn)
|
|
}
|
|
|
|
function checkFn(e){
|
|
console.log(e.target);
|
|
e.target.classList.add('check')
|
|
}
|
|
|
|
|
|
|
|
</script>
|