title: Select Options not Displaying
body: <p>I have followed <a href="http://www.devinterface.com/blog/en/2013/12/come-implementare-in-rails-4-delle-dropdown-dipendenti-con-script-jquery-non-intrusivo/" rel="nofollow">this</a> tutorial to get a dependant select form working in Rails 4.</p>
  
  <p>I can confirm that a AJAX request is being fired and successfully returns child results upon selecting a value from my parent select input. Both Firebug and manual entry of the requested url confirms this. Manual routing to the URL returns this:</p>
  
  <pre><code>{"rule_attributes":[{"id":2,"human_name":"Age"},{"id":1,"human_name":"Gender"}]}
  </code></pre>
  
  <p>My form code (using simple_form &amp; haml):</p>
  
  <pre><code>= f.input :rule_attribute_id,
              :collection =&gt; [],
              :label_method =&gt; :human_name , 
              :value_method =&gt; :id,
              :input_html =&gt; {"data-option-dependent" =&gt; true,"data-option-observed" =&gt; "rule_model_dropdown","data-option-url" =&gt; "/rule_models/:rule_model_id:/rule_attributes.json","data-option-key-method" =&gt; :id,"data-option-value-method" =&gt; :human_name}
  </code></pre>
  
  <p>This is my coffeescript code that should take care of child option population from the json result:</p>
  
  <pre><code>  if observed.val()
      url = url_mask.replace(regexp, observed.val())
  
      $.getJSON url, (data) -&gt;
        $.each data, (i, object) -&gt;
          observer.append $("&lt;option&gt;").attr("value", object[key_method]).text(object[value_method])
          observer.attr "disabled", false
  </code></pre>
  
  <p>In the case listed above, I'm expecting the child  to have Age and Gender as Options (As per JSON). For some reason the values are not populated as options and the child  remains with no options.</p>
  
  <p>Can anybody help with what I'm doing wrong and how to get the child  to populate with the data passed by JSON?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Additional methods in my js looks like this:</p>
  
  <pre><code>observer_dom_id = $(this).attr("id")
  observed_dom_id = $(this).data("option-observed")
  url_mask = $(this).data("option-url")
  key_method = $(this).data("option-key-method")
  value_method = $(this).data("option-value-method")
  </code></pre>
  
  <p><strong>UPDATE 2</strong>
  This is the complete js file:</p>
  
  <pre><code>$ -&gt;
    $("select[data-option-dependent=true]").each (i) -&gt;
  observer_dom_id = $(this).attr("id")
  observed_dom_id = $(this).data("option-observed")
  url_mask = $(this).data("option-url")
  key_method = $(this).data("option-key-method")
  value_method = $(this).data("option-value-method")
  prompt = $("&lt;option value=\"\"&gt;").text("Select a value")
  regexp = /:[0-9a-zA-Z_]+:/g
  observer = $("select#" + observer_dom_id)
  observed = $("#" + observed_dom_id)
  
  observer.attr "disabled", true  if not observer.val() and observed.size() &gt; 1
  
  observed.on "change", -&gt;
    observer.empty().append prompt
  
    if observed.val()
      url = url_mask.replace(regexp, observed.val())
  
      $.getJSON url, (data) -&gt;
        $.each data, (i, object) -&gt;
          # console.log(data)
          observer.append $("&lt;option&gt;").attr("value", object[key_method]).text(object[value_method])
          observer.attr "disabled", false
  </code></pre>