JSFiddle - React, Tailwind, and code Playground
HTML
Countries <div id='divTravelToCountryId'></div>
<br/>
Cities <select id='TravelToCityId'></select>
JavaScript
$(function() {
// Models
var countries =
[
{
CountryId: 1, CountryName: 'Philippines',
Cities :
[
{ CityId: 1, CityName: 'Manila' },
{ CityId: 2, CityName: 'Makati' },
{ CityId: 3, CityName: 'Quezon' },
]
},
{
CountryId: 2, CountryName: 'Canada',
Cities:
[
{ CityId: 4, CityName: 'Toronto' },
{ CityId: 5, CityName: 'Alberta' },
{ CityId: 6, CityName: 'Winnipeg' },
]
},
{
CountryId: 3, CountryName: 'China',
Cities:
[
{ CityId: 7, CityName: 'Beijing' },
{ CityId: 8, CityName: 'Shanghai' }
]
},
];
// Controller that live two lives,
// can't focus well on model :-)
// Populate then wire event...
var divCountry = $('#divTravelToCountryId');
$.each(countries, function() {
var option = $(
'<input type="radio" ' +
' id="TravelToCountryId"' +
' name="TravelToCountryId" />').val(this.CountryId);
divCountry.append(option).append(' ' + this.CountryName).append('<br/>');
});
var country = $('input[name=TravelToCountryId]');
var city = $('#TravelToCityId');
$(country).change(function() {
filterCitiesByCountry();
});
// ...Populate then wire event
// Init...
var initialCountryId = countries[1].CountryId;
$(country).filter('[value="' + initialCountryId + '"]').prop('checked',true);
filterCitiesByCountry();
// ...Init
function filterCitiesByCountry() {
var selectedCountryId =...