title: Populating a second dropdown using ColdFusion, jQuery, and Ajax
body: <p>I have one dropdown that has 14 values. Depending on the value chosen, it'll query a SQL Server database and return some clients to display in a second dropdown.</p>
  
  <p>I want that 2nd dropdown to use the jQuery Multiselect Widget where each value has a checkbox to select. </p>
  
  <p>Here is what I last tried to do, and it just doesn't work.</p>
  
  <pre><code>    &lt;form&gt;
          &lt;label for="lstTiers"&gt;Tier:&lt;/label&gt;  
          &lt;select name="lstTiers" id="lstTiers"&gt;    
              &lt;option value="1"&gt;Tier 1&lt;/option&gt;    
              &lt;option value="2"&gt;Tier 2&lt;/option&gt;    
              &lt;option value="3"&gt;Tier 3&lt;/option&gt;  
              &lt;option value="4"&gt;Tier 4&lt;/option&gt;  
              &lt;option value="5"&gt;Tier 5&lt;/option&gt;  
              &lt;option value="6"&gt;Tier 6&lt;/option&gt;  
              &lt;option value="7"&gt;Tier 7&lt;/option&gt;  
              &lt;option value="8"&gt;Tier 8&lt;/option&gt;  
              &lt;option value="9"&gt;Tier 9&lt;/option&gt;  
              &lt;option value="10"&gt;Tier 10&lt;/option&gt;  
              &lt;option value="11"&gt;Tier 11&lt;/option&gt;                                                                                                                  
              &lt;option value="12"&gt;Tier 12&lt;/option&gt;                                                                                                                  
              &lt;option value="13"&gt;Tier 13&lt;/option&gt;                                                                                                                  
              &lt;option value="14"&gt;Tier 14&lt;/option&gt;                                                                                                                                                                  
          &lt;/select&gt;
          &lt;label for="lstClients"&gt;Client:&lt;/label&gt;  
          &lt;select name="lstClients" id="lstClients"&gt;    
          &lt;/select&gt;
          &lt;input type="button" name="click_me" id="click_me" value="Click Me" /&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Here is one attempt at the jQuery:</p>
  
  <pre><code>        $('#click_me').click(function() { alert('here');
              $.ajax({
                  url: 'Ajax-test.cfc?method=returnSomething',
                  data: {
                      Tier: $('#lstTiers').val()
                  },
                  cache: false,
                  dataType: 'json',
                  success: function(data) { 
                      $('#lstClients').html(data);                        
                  },
  
                  // This fires when an error with ColdFusion occurs
                  error: function() {
  
                      alert('An error has occured!');
  
                  }
  
              });
  
          }); // End click()
  </code></pre>
  
  <p>I had also tried some other jQuery where I looped and built the options.</p>
  
  <p>Finally, here's my cfc file:</p>
  
  <pre><code>&lt;cfcomponent output="false"&gt;
      &lt;cffunction access="remote" name="returnSomething" returntype="query" returnformat="json"&gt;
          &lt;cfargument name="Tier" type="string" required="yes"&gt;
          &lt;cfquery name="qryGetClients" datasource="ProjectGrid_Test"&gt;
              SELECT Div, ClientName FROM tblClientUpgradeClients WHERE Tier = #arguments.Tier# ORDER BY Div
          &lt;/cfquery&gt;
          &lt;cfreturn qryGetClients&gt;
      &lt;cffunction&gt;
  &lt;/cfcomponent&gt;
  </code></pre>
  
  <p>If possible, that returned dropdown should allow user to multiselect using a checkbox. I've played with the jQuery Multiselect widget and I've had it work, but not on this dynamic query.</p>
  
  <pre><code>$('#lstClients).multiselect(
          {   noneSelectedText:"All Selected",
              show: ["fade"], 
              hide: ["fade"], 
              selectedList: 1, 
              multiple: true,
              uncheckAllText: ["Clear"]
          });
  </code></pre>