title: Filtering dropdown based on another dropdown selection
body: <p>I have 2 separate dropdown lists. I need to get each dropdown to filter each other. Every example I have seen so far is an example for dropdowns that have the options hard-coded in. Mine uses a query to populate the options.</p>
  
  <p>So how could I correctly have each dropdown menu filter each other?</p>
  
  <p>Here is my HTML for the dropdowns on <code>index.php</code>:</p>
  
  <pre><code>&lt;select id="collector" onchange="showUser(this.value)"&gt;             
      &lt;option value="" selected disabled&gt;Collector Name&lt;/option&gt;
          &lt;?php foreach($collect-&gt;fetchAll() as $name) { ?&gt;
      &lt;option class="&lt;?php echo $name['Collector Name'];?&gt;" value="&lt;?php echo $name['Collector Name'];?&gt;"&gt;&lt;?php echo $name['Collector Name'];?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
      &lt;/select&gt;
  
  &lt;select id="date" onchange="showUser(this.value)"&gt;              
      &lt;option value="" selected disabled&gt;Bill Date&lt;/option&gt;
          &lt;?php foreach($bill_date-&gt;fetchAll() as $date) { ?&gt;
      &lt;option class="&lt;?php echo $date['Date'];?&gt;" value="&lt;?php echo $date['Collector Name'];?&gt;"&gt;&lt;?php echo $date['Date'];?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>Code that runs each time the dropdown is changed in <code>script</code> tags on <code>index.php</code>:</p>
  
  <pre><code>function showUser(str) {
    if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          }
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              document.getElementById("txtHint").innerHTML = this.responseText;
  
              var newTableObject = document.getElementById('billing_table');
              sorttable.makeSortable(newTableObject);
  
          }
          }
  
      // ---- Gets value of collector dropdown selection -----
          var e = document.getElementById("collector").value;
  
          $.ajax({
           type: 'GET',
           url: 'index.php',
           data: e,
           success: function(response) {
               console.log(e);
           }
         });                  
  
      // ---- Gets value of the current selection in any of the dropdowns ----    
          xmlhttp.open("GET","dropdown-display.php?q="+str,true);
          xmlhttp.send();
  
          document.getElementById('billing_table').style.display = 'none';
      }
  
  $(document).ready(function(){ 
      var $select1 = $( '#collector' ),
          $select2 = $( '#date' ),
      $options = $select2.find( 'option' );
  
  $select1.on( 'change', function() {
      $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
  }).trigger( 'change' );
  
  
  });
  </code></pre>
  
  <p>Query on my <code>index.php</code> page:</p>
  
  <pre><code>$collector = "SELECT [Collector Name]
    FROM [vSpecial_Billing]
    Group By [Collector Name]";
  
  $billdate = "SELECT [Collector Name], [Date]
    FROM [vSpecial_Billing]
    Group By [Collector Name], [Date]";
  </code></pre>
  
  <p>I don't want to send the value to my <code>dropdown-display.php</code> page since my queries that populate the dropdowns are on my <code>index.php</code> page. However, if I put the value variable in the query, then it runs that query on load before a collector selection can be made and my bill date dropdown will then not be populated.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <ul>
  <li>I changed the <code>value</code> in the options for the date dropdown to Collector Name instead of Date</li>
  <li>I also added the <code>$(document).ready(function()</code> at the end of the middle block of code</li>
  <li>I updated the queries that I am using</li>
  </ul>
  
  <p>It filters correctly now, however, on page load, the bill date is unable to selected. It is not populated with any rows. How can I change this?</p>
  
  <p>Also, when I filter it, it defaults to the last date on the list. How can I get it to default to a hardcoded value such as "Date" and then the user can select from the filtered values?</p>