Compare commits

...

3 commits

2 changed files with 42 additions and 9 deletions

View file

@ -50,15 +50,45 @@
<p>A better muli-option input box for HTML</p> <p>A better muli-option input box for HTML</p>
<form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'>
<better-select name="better-selection" class="search"> <better-select name="better-selection" class="search">
<span slot="placeholder">Placeholder...</span> <span slot="placeholder">Placeholder...</span>
<option value="first">First value</option> <option value="first">First value</option>
<option value="second">Second value</option> <option value="second">Second value</option>
<option value="third">Third value</option> <option value="third">Third value</option>
</better-select> </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> <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> </form>
</details>
<vertical-spacer triple></vertical-spacer> <vertical-spacer triple></vertical-spacer>

View file

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