<!DOCTYPE html >
<html >
<head >
<title >Selection Test</title >
</head >
<body >
<select >
<option value="" >Empty</option >
<option value="black" >Black</option >
<option value="blue" >Blue</option >
<option value="brown" >Brown</option >
<option value="cyan" >Cyan</option >
<option value="gray" >Gray</option >
<option value="green" >Green</option >
<option value="indigo" >Indigo</option >
<option value="magenta" >Magenta</option >
<option value="orange" >Orange</option >
<option value="pink" >Pink</option >
<option value="purple" >Purple</option >
<option value="red" >Red</option >
<option value="violet" >Violet</option >
<option value="white" >White</option >
<option value="yellow" >Yellow</option >
</select >
<script >
window.result = {
onInput: null,
onChange: null,
onBubblingChange: null,
onBubblingInput: null,
};
let select = document.querySelector('select' );
function makeEmpty() {
for (let i = select .options.length - 1; i >= 0; --i) {
select .remove(i);
}
}
function makeMultiple() {
select .setAttribute('multiple' , true);
}
select .addEventListener('input' , () => {
result.onInput = Array.from(select .querySelectorAll('option:checked' )).map ((option ) => {
return option .value;
});
}, false);
select .addEventListener('change' , () => {
result.onChange = Array.from(select .querySelectorAll('option:checked' )).map ((option ) => {
return option .value;
});
}, false);
document.body .addEventListener('input' , () => {
result.onBubblingInput = Array.from(select .querySelectorAll('option:checked' )).map ((option ) => {
return option .value;
});
}, false);
document.body .addEventListener('change' , () => {
result.onBubblingChange = Array.from(select .querySelectorAll('option:checked' )).map ((option ) => {
return option .value;
});
}, false);
</script >
</body >
</html >
Messung V0.5 C=89 H=98 G=93
¤ Dauer der Verarbeitung: 0.16 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland