Заполнение одного окна выбора на основе выбора в другом поле выбора - JQuery?

Я пытаюсь заполнить один флажок выбора на основе выбора, сделанного в первом поле выбора. Я посмотрел онлайн и нашел много полезной информации о жестко закодированных параметрах, но мне нужно, чтобы мои параметры исходили из запроса (например, cfquery in coldfusion). Я знаю, что cfquery является серверной, поэтому я не могу включить его в свой jquery, но есть ли другой вариант?

Я использовал следующий пример:

HTML:

<select id="counties">
    <option> </option>
    <option> somerset </option>
    <option> hertfordshire </option>
</select>

<select id="towns" disabled="true">
</select>

JS:

var countyTowns = [
    ["Bath", "Bristol"],
    ["Letchworth", "Hitchin"]
];

$("#counties").change(function() {
    var county = this.selectedIndex - 1;
    $("#towns").empty();
    if (county === -1) {
        $("#towns").attr("disabled", true);
    } else {
        var towns = countyTowns[county];
        for (var i = 0; i < towns.length; i++) {
            $("#towns").append($("<option></option>").text(towns[i]));
        }
        $("#towns").attr("disabled", false);
    }
});

Мне нужно, чтобы города были динамичными и могли быть прочитаны из базы данных.

Любая помощь очень ценится!

Спасибо

Ответ 1