mirror of
				https://github.com/bigskysoftware/htmx.git
				synced 2025-11-04 07:24:06 +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