title: jQuery detach and append options in a select drop down based on selection for Safari
body: <p>I have two select drop downs with the secondary dropdown filtering options based on the first drop down selection. I'm using US state and counties as an example. I'm using show/hide which works great, but doesn't work in Safari. I read about using the detach and append methods to solve this issue, but I'm struggling with getting it to work. I need help knowing where in my code to replace show/hide with detach/append instead.</p>
  <p>JS fiddle - <a href="https://jsfiddle.net/m8zLg6d4/" rel="nofollow noreferrer">https://jsfiddle.net/m8zLg6d4/</a></p>
  <p>I cannot do disabled props. I tried that solution, but my client wants to remove/show options instead.</p>
  <p>jQuery:</p>
  <pre><code>$(document).ready(function() {
      var countyDropdown = $('.county');
     
    $('#state').on('change', function(){
      var state = $(this).val();
      
      countyDropdown.find('option').show();
      countyDropdown.find('select').val('Select a County').attr('selected', 'selected');
      
      if(state.length){
          countyDropdown.find('select').removeAttr('disabled');
        
        var county = countyDropdown.find('option');
        
        county.filter(function(){         
           return $(this).attr('data-state') != state;            
         }).hide(); 
      } else {
          countyDropdown.find('select').attr('disabled');
        countyDropdown.find('option').show();
      }
    });
  });
  </code></pre>