Spaces:
Running
Running
File size: 1,729 Bytes
b5bffcc 2531445 3b5501b b5bffcc 3b5501b b5bffcc 3b5501b b5bffcc 1108474 3b5501b b5bffcc 2531445 b5bffcc 3b5501b b5bffcc 0760113 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import time
from fasthtml.common import H3, Div, Form, Img, Label, Option, Select, fast_app
app, rt = fast_app()
@app.get
def page():
return Div(cls="container")(
H3("Pick A Make/Model"),
Form(
Div(
Label("Make"),
Select(name="make", hx_get=models.rt(sleep=1), hx_target="#models", hx_indicator=".htmx-indicator")(
Option("Audi", value="audi"),
Option("Toyota", value="toyota"),
Option("BMW", value="bmw"),
),
),
Div(
Label("Model"),
Select(models("audi"), id="models"),
Img(width="20", src="/img/bars.svg", cls="htmx-indicator"),
),
),
)
@app.get
def models(make: str, sleep: int = 0):
time.sleep(sleep)
cars = {
"audi": ["A1", "A4", "A6"],
"toyota": ["Landcruiser", "Tacoma", "Yaris"],
"bmw": ["325i", "325ix", "X5"],
}
return tuple(Option(v, value=v) for v in cars[make])
DESC = "Demonstrates making the values of a select dependent on another select"
HTMX_URL = "https://htmx.org/examples/value-select/"
DOC = """
In this example we show how to make the values in one select depend on the value selected in another select.
To begin we start with a default value for the make select: Audi. We render the model select for this make. We then have the make select trigger a GET to /models to retrieve the models options and target the models select.
Here is the code:
::page::
When a request is made to the /models end point, we return the models for that make:
::models::
And they become available in the model select.
"""
HEIGHT = "300px"
|