From a92293fb71359854f35ec35a3d55e5bc5cd935b3 Mon Sep 17 00:00:00 2001
From: Greg Johnston <greg.johnston@gmail.com>
Date: Sat, 30 Dec 2023 13:00:07 -0500
Subject: [PATCH] Better `<select>` example

---
 src/view/05_forms.md | 51 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/view/05_forms.md b/src/view/05_forms.md
index 4d80959..8c6aca9 100644
--- a/src/view/05_forms.md
+++ b/src/view/05_forms.md
@@ -176,15 +176,58 @@ in Leptos (or vanilla JavaScript) it won’t work.
 Instead, use the `selected` field:
 
 ```rust
+let (value, set_value) = create_signal("B".to_string());
 view! {
-    <select>
-        <option selected=move || count.get() == 0>"0"</option>
-        <option selected=move || count.get() == 1>"1"</option>
-        <option selected=move || count.get() == 2>"2"</option>
+    <select on:change=move |ev| {
+        let new_value = event_target_value(&ev);
+        set_value(new_value);
+    }>
+        <option
+            value="A"
+            selected=move || value() == "A"
+        >
+            "A"
+        </option>
+        <option
+            value="B"
+            selected=move || value() == "B"
+        >
+            "B"
+        </option>
     </select>
 }
 ```
 
+That's somewhat repetitive, but can easily be refactored:
+```rust
+#[component]
+pub fn App() -> impl IntoView {
+    let (value, set_value) = create_signal("B".to_string());
+    view! {
+        <select on:change=move |ev| {
+            let new_value = event_target_value(&ev);
+            set_value(new_value);
+        }>
+            <SelectOption value is="A"/>
+            <SelectOption value is="B"/>
+            <SelectOption value is="C"/>
+        </select>
+    }
+}
+
+#[component]
+pub fn SelectOption(is: &'static str, value: ReadSignal<String>) -> impl IntoView {
+    view! {
+        <option
+            value=is
+            selected=move || value() == is
+        >
+            {is}
+        </option>
+    }
+}
+```
+
 [Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/5-forms-0-5-rf2t7c?file=%2Fsrc%2Fmain.rs%3A1%2C1)
 
 <iframe src="https://codesandbox.io/p/sandbox/5-forms-0-5-rf2t7c?file=%2Fsrc%2Fmain.rs%3A1%2C1" width="100%" height="1000px" style="max-height: 100vh"></iframe>