Populating One Select Box Based on the Selection in Another Select Box - JQuery?
<p>I am trying to populate one select box based on the selection made in the first select box. I've looked online, and found a lot of helpful information on hard-coded options, but I need my options to come from a query (like cfquery in coldfusion). I know that a cfquery is server-side, so I cannot include it in my jquery, but is there another option?</p>

<p>I was using the following example:</p>

<p>down vote accepted</p>

<p>Code speaks for itself:</p>

<p>HTML:</p>

<pre><code>&lt;select id="counties"&gt;
    &lt;option&gt; &lt;/option&gt;
    &lt;option&gt; somerset &lt;/option&gt;
    &lt;option&gt; hertfordshire &lt;/option&gt;
&lt;/select&gt;

&lt;select id="towns" disabled="true"&gt;
&lt;/select&gt;
</code></pre>

<p>JS:</p>

<pre><code>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 &lt; towns.length; i++) {
            $("#towns").append($("&lt;option&gt;&lt;/option&gt;").text(towns[i]));
        }
        $("#towns").attr("disabled", false);
    }
});
</code></pre>

<p>What I would need is for towns to be dynamic, and able to be read from a database. </p>

<p>Any help is greatly appreciated!</p>

<p>Thanks</p>
