mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-11-17 05:47:59 +00:00
Clean up parameter inclusion logic and update demos to use GET where appropriate, rather than hiding from my bad design choices
document example
This commit is contained in:
parent
a3c9cf6b6a
commit
b80858e90a
@ -4,6 +4,40 @@ layout: demo_layout.njk
|
|||||||
|
|
||||||
## Dependent Select
|
## Dependent Select
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<label >Make</label>
|
||||||
|
<select name="make" kt-get="/models" kt-target="#models" kt-indicator=".kutty-indicator">
|
||||||
|
<option value="audi">Audi</option>
|
||||||
|
<option value="toyota">Toyota</option>
|
||||||
|
<option value="bmw">BMW</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Model</label>
|
||||||
|
<select id="models" name="model">
|
||||||
|
<option value="a1">A1</option>
|
||||||
|
...
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
When a request is made to the `/models` end point, we return the models for that make:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<option value='325i'>325i</option>
|
||||||
|
<option value='325ix'>325ix</option>
|
||||||
|
<option value='X5'>X5</option>
|
||||||
|
```
|
||||||
|
|
||||||
|
And they become available in the `model` select.
|
||||||
|
|
||||||
{% include demo_ui.html.liquid %}
|
{% include demo_ui.html.liquid %}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user