darkwiiplayer/BetterSelect
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: darkwiiplayer:79b2ef4890c8ca28b3c4e0716e7b4d857e1a853e
Branches Tags
darkwiiplayer:main
..
compare: darkwiiplayer:61facdbfb95b46f850f1c38c9051dc5a9ebfc28e
Branches Tags
darkwiiplayer:main

No commits in common. "79b2ef4890c8ca28b3c4e0716e7b4d857e1a853e" and "61facdbfb95b46f850f1c38c9051dc5a9ebfc28e" have entirely different histories.
79b2ef4890 ... 61facdbfb9

2 changed files with 9 additions and 42 deletions
Show stats Expand all files Collapse all files

48
index.html
View file

@ -50,45 +50,15 @@
<p>A better muli-option input box for HTML</p>
<better-select name="better-selection" class="search">
<span slot="placeholder">Placeholder...</span>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
<details>
<summary>More examples</summary>
<form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'>
<label>
<span>No Search</span>
<better-select>
<span slot="placeholder">Placeholder...</span>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
</label>
<label>
<span>No Placeholder</span>
<better-select>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
</label>
<label>
<span>Pre-Selected Option</span>
<better-select>
<option value="first">First value</option>
<option value="second" selected>Second value</option>
<option value="third">Third value</option>
</better-select>
</label>
<button title="Log form data to dev console">Submit</button>
<p>Submit the form to have its form values printed to the dev console.</p>
</form>
</details>
<form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'>
<better-select name="better-selection" class="search">
<span slot="placeholder">Placeholder...</span>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
<button title="Log form data to dev console">Submit</button>
</form>
<vertical-spacer triple></vertical-spacer>

3
src/BetterSelect.js
View file

@ -298,9 +298,6 @@ export class BetterSelect extends HTMLElement {
this.list.replaceChildren()
for (const option of this.options) {
this.list.append(f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`)
if (option.selected) {
this.value = option.value
}
}
}
}