title: Use JQuery to set value for dependent select upon document ready
body: <p>Rails 4.0.3, Ruby 2.0.0</p>
  
  <p>Floor is a dependent select.  It's contents, how many floors, are unknown until the building is selected.  However, this is fired in an edit(update) form.  So, the building and floor are known.  I am trying to set the current values within JQuery.  I obtain a building index and click on a building.  At that point, the edit form referenced here displays the building name.  It should also display the floor but that isn't happening. It only displays the prompt.  How to I fire the floor event when the building event fires so that both current values are selected?</p>
  
  <pre><code>$(document).ready(function () {
      ...
      });
      $("select[name='item[building_id]']").change(function () {
          $.getJSON("/floors", {building: $(this).val()}, function (data) {
              var options_html = ['&lt;option value=""&gt;Floor?&lt;/option&gt;'];
              $.each(data, function (index, floor) {
                  if (index = 0) {options_html.push('&lt;option value=""&gt;Floor?&lt;/option&gt;');}
                  options_html.push("&lt;option value='" + floor.id + "'&gt;" + floor.name + "&lt;/option&gt;");
              });
              $('select#item_floor_id').html(options_html.join('')).prop('disabled', false);
          });
      });
      $("select[name='item[building_id]']").ready(function () {
          var building = $('#item_building_id').attr("value");
          $("#item_building_id").val(building).trigger("change");
      });
      $("select[name='item[floor_id]']").ready(function () {
          var floor = $('#item_floor_id').attr("value");
          $("#item_floor_id").val(floor);
      });
  });
  </code></pre>
  
  <p>EDIT I'm not a JavaScript/JQuery expert but I don't understand why this doesn't work and has the same problem.  It attempts to select the floor before the select list is completed.  If a breakpoint is set and then resumed, it works fine...</p>
  
  <pre><code>$(document).ready(function () {
      ...
      });
      $("select[name='item[building_id]']").change(function () {
          $.getJSON("/floors", {building: $(this).val()}, function (data) {
              var options_html = ['&lt;option value=""&gt;Floor?&lt;/option&gt;'];
              $.each(data, function (index, floor) {
                  if (index = 0) {options_html.push('&lt;option value=""&gt;Floor?&lt;/option&gt;');}
                  options_html.push("&lt;option value='" + floor.id + "'&gt;" + floor.name + "&lt;/option&gt;");
              });
              $('select#item_floor_id').html(options_html.join('')).prop('disabled', false);
          });
          var floor = $('#item_floor_id').attr("value");
          $("#item_floor_id").val(floor);
      });
      $("select[name='item[building_id]']").ready(function () {
          var building = $('#item_building_id').attr("value");
          $("#item_building_id").val(building).trigger("change");
      });
  });
  </code></pre>