This is a small JavaScript project that will allow you to create dependencies of options between two HTML select elements. When the value of the first select changes, it automatically fills the new options of the second with results of an Ajax request.
- MooTools 1.1
new SelectDependency(target, source, options);new SelectDependency('city', 'country', {
url: 'index.php',
requestValueKey: 'country_id',
requestParams: {
controller: 'ajax',
task: 'getCities'
},
responseLabelKey: 'name',
responseValueKey: 'id'
});- target: The target select element where to push new values after the Ajax request.
- source: The source select element which triggers the update of the values of the target element when its value is changed
- options: An object containing any of the following:
- onChange
- method
- url
- requestValueKey
- requestParams
- responseLabelKey
- responseValueKey
- responseSelectedKey
- loadingText
| Optiona Name | Default Value | Description |
|---|---|---|
| onChange | *Empty (Class.empty)* | This Event gets fired every time the options of the target element has been populated. |
| url | Base URL for the Ajax Request. | |
| requestValueKey | value | Name of the parameter containing the current value of the source element to be sent with the Ajax Request. |
| requestParams | {} | Map of additional parameters to send with the Ajax Request. |
| responseLabelKey | label | Name of the parameter containing the label of the response. |
| responseValueKey | value | Name of the parameter containing the value of the response. |
| responseSelectedKey | selected | Name of the parameter from the response indicating the option selected by default. |
| loadingText | Loading... | Use this to translate or change the loading text |
The following example shows how to update a list of cities for a previously selected country.
When the user selects a country, an Ajax is sent to the server and the list of cities gets automatically updated with a new list of cities from the server response.
<select name="country_id" id="country_id">
<option value="33">Argentina</option>
<option value="24">Australia</option>
<option value="15">Austria</option>
<option value="55">Azerbaijan</option>
<option value="10">Belgium</option>
<option value="27">Brazil</option>
<option value="57">Cambodia</option>
<option value="26">Canada</option>
<option value="59">China</option>
<option value="37">Costa Rica</option>
<option value="18">Croatia</option>
<option value="52">Cuba</option>
<option value="20">Cyprus</option>
<option value="5">Czech Republic</option>
<option value="14">Denmark</option>
<option value="2">France</option>
<option value="9">Germany</option>
<option value="8">Greece</option>
<option value="11">Hungary</option>
<option value="56">Iceland</option>
<option value="41">India</option>
<option value="32">Indonesia</option>
<option value="53">Ireland</option>
<option value="16">Israel</option>
<option value="3">Italy</option>
<option value="45">Malaysia</option>
<option value="21">Malta</option>
<option value="35">Mexico</option>
<option value="31">Morroco</option>
<option value="4">Netherlands</option>
<option value="39">New Zealand</option>
<option value="23">Norway</option>
<option value="22">Poland</option>
<option value="12">Portugal</option>
<option value="47">Russia</option>
<option value="28">Serbia</option>
<option value="49">Singapore</option>
<option value="36">South Africa</option>
<option value="1">Spain</option>
<option value="46">Sri Lanka</option>
<option value="17">Sweden</option>
<option value="51">Switzerland</option>
<option value="48">Thailand</option>
<option value="7">Turkey</option>
<option value="6">UK</option>
<option value="50">Ukraine</option>
<option value="43">Uruguay</option>
<option value="25">USA</option>
</select>
<select name="city_id" id="city_id">
<option value="162">Buenos Aires</option>
<option value="156">Mendoza</option>
</select>window.addEvent('domready', function() {
new SelectDependency('city_id', 'country_id', {
url: 'index.php',
requestValueKey: 'country_id',
requestParams: {
task: 'getCitiesAjax',
},
responseLabelKey: 'city_name',
responseValueKey: 'id'
});
});[{"id":"22","country_id":"10","city_name":"Brussels"},{"id":"130","country_id":"10","city_name":"Gent"}]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent