mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-04-06 10:44:01 +00:00
ee4ef5f18d
* fix autofocus on mobile search bar
* improve pattern documentation structure and titles
- inline-validation.md → active-validation.md
- bulk-update.md → bulk-actions.md
- delete-row.md → delete-in-place.md
- sortable.md → drag-to-reorder.md
- click-to-edit.md → edit-in-place.md
- value-select.md → linked-selects.md
- reset-user-input.md → reset-on-submit.md
- Merged tabs-hateoas.md and tabs-javascript.md into single tabs.md
- Removed obsolete files:
- file-upload-input.md (merged into file-upload.md)
- web-components.md (content moved to /docs - not a pattern)
- Refreshed titles and descriptions
- Updated icons for better visual consistency
- Disabled interactive demos:
- Commented out {{ demo_environment() }} and demo code blocks in: animations, click-to-load, infinite-scroll, file-upload, bulk-actions, drag-to-reorder, edit-in-place, active-search
- Minor formatting cleanup across multiple pattern files
* update /help page
2.8 KiB
2.8 KiB
+++
title = "Linked Selects"
template = "demo.html"
+++
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:
<div>
<label >Make</label>
<select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-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>
<img class="htmx-indicator" width="20" src="/img/bars.svg" alt="Saving...">
</div>
When a request is made to the /models end point, we return the models for that make:
<option value='325i'>325i</option>
<option value='325ix'>325ix</option>
<option value='X5'>X5</option>
And they become available in the model select.
{{ demo_environment() }}
<script> //========================================================================= // Fake Server Side Code //========================================================================= // routes init("/demo", function(request, params){ return formTemplate(); }); onGet(/models.*/, function (request, params) { var make = dataStore.findMake(params['make']); return modelOptionsTemplate(make['models']); }); // templates function formTemplate() { return `Pick A Make/Model
Make
Audi
Toyota
BMW
Model
A1
A3
A6
`;
}
function modelOptionsTemplate(make) {
return make.map(function(val) {
return "" + val +"";
}).join("\n");
}
var dataStore = function(){
var data = {
audi : { models : ["A1", "A4", "A6"] },
toyota : { models : ["Landcruiser", "Tacoma", "Yaris"] },
bmw : { models : ["325i", "325ix", "X5"] }
};
return {
findMake : function(make) {
return data[make];
}
}
}()
</script>
