Compare commits
3 commits
61facdbfb9
...
79b2ef4890
Author | SHA1 | Date | |
---|---|---|---|
79b2ef4890 | |||
a40bdcb56c | |||
2f2db6edc6 |
2 changed files with 42 additions and 9 deletions
32
index.html
32
index.html
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue