select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
7dd9f2f0e8ec4d73a3825d61e70d7f5feb8c2c09
parent
d5e4dda73b8de33c3b0e9a3db30222662cb45aef
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2021-03-28 06:09
disabled options

Diffstat

M select.css 4 ++++
M select.js 12 ++++++++----

2 files changed, 12 insertions, 4 deletions


diff --git a/select.css b/select.css

@@ -46,6 +46,10 @@
   46    46 	background: Highlight;
   47    47 	color: HighlightText;
   48    48 }
   -1    49 .select__dropdown [role="option"][aria-disabled="true"] {
   -1    50 	background: transparent;
   -1    51 	color: GrayText;
   -1    52 }
   49    53 .select__dropdown ul {
   50    54 	margin: 0;
   51    55 	padding: 0;

diff --git a/select.js b/select.js

@@ -127,10 +127,14 @@ export class Select {
  127   127 		li.id = this.id + '_option_' + i;
  128   128 		li.textContent = op.label;
  129   129 		li.setAttribute('role', 'option');
  130    -1 		li.onclick = () => {
  131    -1 			this.setValue(i, this.original.multiple);
  132    -1 			this.input.focus();
  133    -1 		};
   -1   130 		if (op.disabled) {
   -1   131 			li.setAttribute('aria-disabled', 'true');
   -1   132 		} else {
   -1   133 			li.onclick = () => {
   -1   134 				this.setValue(i, this.original.multiple);
   -1   135 				this.input.focus();
   -1   136 			};
   -1   137 		}
  134   138 		this.indexMap.push(i);
  135   139 		return li;
  136   140 	}