console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>原生js实现多选功能</title>
</head>
<body>
<div>
<label>多选功能:</label>
<select id="multipleSelect">
<option selected="selected" disabled="disabled" style='display: none' value=''></option>
<option>HTML</option>
<option>CSS</option>
<option>Javascript</option>
<option>vue</option>
<option>react</option>
</select>
</div>
<script>
let values = [];
let opts = [];
let select = document.getElementById("multipleSelect");
for(let i=0;i<select.length;i++){
opts.push(select.item(i));
}
let optionHide = document.createElement('option');
optionHide.hidden=true;
select.appendChild(optionHide);
select.addEventListener('input',function (){
let value = this.options[this.selectedIndex].value;
this.options[this.selectedIndex].style="background: skyblue";
let index = values.indexOf(value);
if(index>-1){
values.splice(index,1);
opts.filter(function (opt){
if(opt.value === value){
opt.style="";
}
});
}else {
values.push(value);
};
this.options[this.length-1].text=values.toString();
if(values.length>0){
this.options[this.length-1].selected=true;
}else {
this.options[0].selected=true;
}
console.log(select.value);
});
</script>
</body>
</html>