title: Auto populate select tags using jQuery and JSON
body: <p>I'm trying to get one select tag to populate based on the value of another select tag. The values for the populated select tag come from a JSON document.</p>
  
  <p>The practical use here is for departing ferry terminals and what terminals they can reach.</p>
  
  <p>Here is the code snippet I'm using</p>
  
  <pre><code>$(function(){
    $("select#departingfrom").change(function(){
      $.getJSON("/database.json", $(this).val(), function(ferries){
        var options = '';
        for (var key in ferries) {
          options += '&lt;option value=' + key + '&gt;' + key + '&lt;/option&gt;';
        }
        $("select#arrivingto").html(options);
      });
    });
  });
  </code></pre>
  
  <p>Here's a small example of the JSON document</p>
  
  <pre><code>var ferries = {
    "horseshoebay": {
      "departurebay": {},
      "langdale": {}
    },
    "departurebay": {
      "horeshoebay": {}
    },
    "tsawwassen": {
      "swartzbay": {},
      "dukepoint": {}
    },
    "swartzbay": {
      "tsawwassen": {},
      "fulfordharbour": {}
    },
    "dukepoint": {
      "tsawwassen": {}
    },
    "langdale": {
      "horeshoebay": {}
    },
    "fulfordharbour": {
      "swartzbay": {}
    }
  },
  </code></pre>
  
  <p>And then the HTML</p>
  
  <pre><code>&lt;select id="departingfrom"&gt;
    &lt;option selected="selected"&gt;&lt;/option&gt;
    &lt;option value="tsawwassen"&gt;Tsawwassen (Vancouver)&lt;/option&gt;
    &lt;option value="swartzbay"&gt;Swartz Bay (Victoria)&lt;/option&gt;
    &lt;option value="dukepoint"&gt;Duke Point (Nanaimo)&lt;/option&gt;
    &lt;option value="departurebay"&gt;Departure Bay (Nanaimo)&lt;/option&gt;
    &lt;option value="horseshoebay"&gt;Horseshoe Bay (North Vancouver)&lt;/option&gt;
    &lt;option value="langdale"&gt;Langdale (Sunshine Coast)&lt;/option&gt;
    &lt;option value="fulfordharbour"&gt;Fulford Harbour (Salt Spring Island)&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="arrivingto"&gt;
    &lt;option selected="selected"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I can't seem for the life of me to get the "function(ferries)" to run, so it makes me think that the .val is not working correctly. Let me know if you guys have any suggestions!</p>