title: Dependent Dropdown Contents with jquery-select2
body: <p>I have a Rails 4 app where I'm using Jquery-select2 for my dropdown lists. I have two dropdowns where I want the selection in the first do dictate what the user can select in the second. Sort of like selecting a country and being given a list of states for that country.</p>
  
  <p>In my application I have Demographic and Response models. When someone selects a Demographic I want to populate the Responses list with the appropriate items for that Demographic.</p>
  
  <p>I had this working before I started using Select2. But, I'm missing some of the nuances in how to get it working with Select2. I'm so so with Rails but Javascript and Jquery are my weak points.</p>
  
  <p>Here is my form:</p>
  
  <pre><code>&lt;form&gt;
        &lt;%= f.label :demographic %&gt;&lt;br&gt;
        &lt;%= select_tag "demographics", options_from_collection_for_select(@demographic, "id", "demographic_name"), id: "simple-example" %&gt;&lt;/br&gt;&lt;/br&gt;
        &lt;%= f.label :operator %&gt;&lt;br&gt;
        &lt;%= select_tag "operators", options_from_collection_for_select(@operator, "id", "name"), id: "operator" %&gt;&lt;/br&gt;&lt;/br&gt;
        &lt;%= f.label :response %&gt;&lt;br&gt;
        &lt;%= select_tag "responses", options_from_collection_for_select(@response, "id", "name"), id: "response" %&gt;&lt;/br&gt;&lt;/br&gt;
        &lt;%= f.label :operator_selection %&gt;&lt;br&gt;
        &lt;%= select_tag "operator_selections", options_from_collection_for_select(@operator_selection, "id", "name"), id: "operator_selection" %&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Here is some CoffeeScript which I found and modified and had working prior to Select2:</p>
  
  <pre><code>jQuery -&gt;
    responses = $('#query_response_id').html()
    $('#query_demographic_id').change -&gt;
      demographic = $('#query_demographic_id :selected').text()
      escaped_demographic = demographic.replace(/([ #;&amp;,.+*~\':"!^$[\]()=&gt;|\/@])/g, '\\$1')
      options = $(responses).filter("optgroup[label='#{escaped_demographic}']").html()
      if options
        $('#query_response_id').html(options)
        $('#query_response_id').parent().show()
      else
        $('#query_response_id').empty()
        $('#query_response_id').parent().hide()
  </code></pre>
  
  <p>The line of code I used before Select2 for the Response model dropdown was:</p>
  
  <pre><code>&lt;%= f.grouped_collection_select :response_id, Demographic.order(:demographic_name), :responses, :demographic_name, :id, :name, include_blank: :true %&gt;
  </code></pre>
  
  <p>When I look at that it appears that somehow I need to move <code>:responses, :demographic_name,</code> into this line:</p>
  
  <pre><code>&lt;%= select_tag "responses", options_from_collection_for_select(@response, "id", "name"), id: "response" %&gt;
  </code></pre>
  
  <p>But, everything I've tried has failed. I've looked at <a href="https://stackoverflow.com/questions/33106176/dynamic-dependent-dropdown-with-jquery-select2">this</a> and <a href="https://stackoverflow.com/questions/14797261/select2-dependent-dropdown-lists">this</a> and <a href="https://stackoverflow.com/questions/31691214/handsontable-select2-dependent-dropdowns">this</a>, but none of them are Rails related so I'm stuck.</p>
  
  <p>Any ideas?</p>
  
  <p>All help is greatly appreciated.</p>