Add more examples to the webpage

index.html

@@ -50,15 +50,45 @@
 
 	<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">
-			<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>
+	<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>
 
 	<vertical-spacer triple></vertical-spacer>
 

src/BetterSelect.js

@@ -298,6 +298,9 @@ 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
+			}
 		}
 	}
 }