JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rsvpjs-builds.s3.amazonaws.com/rsvp-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h4 class="text-center">Application</h4>
<form>
<div class="form-group">
<label for="country">Pays</label>
<select id="country" name="country" class="form-control">
<option value="">Choisissez un pays</option>
<option value="be">Belgique</option>
<option value="es">Espagne</option>
<option value="fr">France</option>
</select>
</div>
<div class="form-group">
<label for="town">Ville</label>
<select id="town" name="town" class="form-control" disabled>
<option>Pas de villes</option>
</select>
</div>
</form>
</div>
JavaScript
var towns = {
"be": [
"Bruxelles",
"Namur"],
"fr": [
"Paris",
"Lyon"],
"es": ["Madrid", "Barcelone"]
};
var townUpdater = {
country: undefined,
towns: [],
fetch: function () {
if(this.country !== "") {
this.towns = towns[this.country];
} else {
this.towns = [];
}
this.render();
},
render: function () {
$("#town").removeAttr("disabled");
$("#town").text("");
if( this.towns.length === 0) {
$("#town").append("<option>Pas de villes</options>");
$("#town").attr("disabled","disabled");
return;
}
for (var i = 0; i < this.towns.length; i++) {
var option = $('<option></option>');
option.text(this.towns[i]);
$('#town').append(option);
}
},
initEventHandler: function () {
$('#country').change(function (event) {
this.country = $("#country option:selected").val();
this.fetch();
}.bind(this));
}
};
townUpdater.initEventHandler();