Dropdown-meny som skal populeres av JavaScript med et getJSON-kall som får en liste med JSON-data, sett i items.json-filen.

form.html

<form method="post">
  <fieldset>
    <legend>My Form</legend>
    <div class="control-group">
      <label class="control-label" for="zone">Select Zone:
        <div class="controls">
          <select id="zone" class="input-group" name="zone"></select>
        </div>
      </label>
    </div>
  </fieldset>
</form>

form.js

/*jslint indent: 2 */
/*global $, jQuery, document, console*/

function fill_option_list(data_url, tag_id, callback) {
  "use strict";
  $.getJSON(data_url, function (data) {
    /*jslint unparam: true*/
    //console.log(' data ', data);
    $.each(data, function (index, value) {
      $("<option/>").attr("value", value.id).html(value.name).appendTo(tag_id);
    });
    /*jslint unparam: false*/
  }).done(function () {
    if (callback) {
      callback();
    }
  });
}

$(document).ready(function () {
  "use strict";
  fill_option_list('/data/serviceofferings', '#instancetype');

  fill_option_list('/data/zones', '#zone', function () {
    fill_option_list('/data/zone/' + $("#zone option:selected").val() + '/networks', '#network');
  });

  $("#zone").change(function () {
    if ($(this).val() !== '') {
      $('#network').empty();
      fill_option_list('/data/zone/' + $("#zone option:selected").val() + '/networks', '#network');
    }
  });
});

items.json

[ {"id": "d630b15a",
   "name": "Navn1"},
  {"id": "d73e8d08",
   "name": "Navn2"},
  {"id": "ee335fb3",
   "name": "Navn3"},
  {"id": "8da8217e",
   "name": "Navn4"} ]