How can I get bookmarked hash links to work with a jQuery change function?

Question

What's the simplest way with this jQuery change function to get bookmarked hash links to work, i.e. to be able to use example.com/#theme1 or example.com/#theme2 links?

The jQuery #theme-selector changes the hash and shows/hides the relevant divs with the class, i.e. .theme1 or .theme2, but when going to example.com/#theme1 from a bookmarked link, all divs are shown.

In addition, if I manually refresh a URL with a hash, i.e. example.com/#theme1, the hash remains #theme1, but all divs are shown.

Some other questions on SO deal with bookmarkable hashes, but they're many years old. And some libraries that appear useful are ten years old, too, like https://github.com/asual/jquery-address

Unfortunately, running the snippet here won't show browser hash changes, nor will JSFiddle.

  jQuery(document).ready(function(jQuery){
    
        jQuery("#theme-selector").change(function () {
    
        var urlhash = document.getElementById('theme-selector').value;
    
        window.location.hash = urlhash;
    
    });
    
    
    jQuery("#theme-selector").change(function () {
    
    themeclass = window.location.hash.substr(1);
    
    jQuery('.blockcontent').hide();
    jQuery('.' +themeclass).show();
    jQuery('.theme-header').hide();
    jQuery('.' +themeclass).show();
    
        });
    
    });

 .blockcontent {
    display:inline-block;
    width:150px;
    border:1px solid #acacac;
    }
    
    .theme-header {
    display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <label for="theme-selector">Filter by Theme:</label>
    
    <select name="theme-selector" id="theme-selector" value="">
    
    <option value="all-themes">All Themes</option>
    <option value="theme1">Theme 1</option>
    <option value="theme2">Theme 2</option>
    <option value="theme3">Theme 3</option>
    
    </select>
    
    <br>
    
    <div id="theme-description-container">
    <div class="theme1 theme-header">Theme 1 Description</div>
    <div class="theme2 theme-header">Theme 2 Description</div>
    <div class="theme3 theme-header">Theme 3 Description</div>
    </div>
   
    <br>
    
    <div class="blockcontent all-themes theme1">
    theme1<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    </div>
    
    <div class="blockcontent all-themes theme2">
    theme2<br><br>sed do eiusmod tempor incididunt sed do eiusmod eiusmod
    </div>
    
    <div class="blockcontent all-themes theme3 theme2">
    theme2 and theme3<br><br>consectetur adipiscing elit,consect adipiscing elit, 
    </div>
    
    <div class="blockcontent all-themes theme3">
    theme3<br><br>consectetur adipiscing elit,consect etur adipiscing elit, 
    </div>

Answer 1

You need to use $(location).attr('hash'); to get the current hash.

I commented my code.

NOTE : instead of using document.getElementById('theme-selector'), you can just use $(this).

EDIT : Change event handler should be defined before calling the .trigger('change')

jQuery(document).ready(function(jQuery) {

  
  jQuery("#theme-selector").change(function () {
    var urlhash = document.getElementById('theme-selector').value;
    window.location.hash = urlhash;

  });


 jQuery("#theme-selector").change(function () {

  themeclass = window.location.hash.substr(1);

  jQuery('.blockcontent').hide();
  jQuery('.' +themeclass).show();
  jQuery('.theme-header').hide();
  jQuery('.' +themeclass).show();

 });
 
   var urlhash = $(location).attr('hash'); // current hash
  
  // we check if current hash exist
  if (urlhash && urlhash !== "") {
     urlhash = urlhash.replace('#', ''); // remove # from hash
     
     // trigger change on selected option corresponding to hash
     $("#theme-selector option[value='" + urlhash + "']").prop("selected",true).trigger("change");
  }

});

.blockcontent {
    display:inline-block;
    width:150px;
    border:1px solid #acacac;
    }
    
    .theme-header {
    display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <label for="theme-selector">Filter by Theme:</label>
    
    <select name="theme-selector" id="theme-selector" value="">
    
    <option value="all-themes">All Themes</option>
    <option value="theme1">Theme 1</option>
    <option value="theme2">Theme 2</option>
    <option value="theme3">Theme 3</option>
    
    </select>
    
    <br>
    
    <div id="theme-description-container">
    <div class="theme1 theme-header">Theme 1 Description</div>
    <div class="theme2 theme-header">Theme 2 Description</div>
    <div class="theme3 theme-header">Theme 3 Description</div>
    </div>
   
    <br>
    
    <div class="blockcontent all-themes theme1">
    theme1<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    </div>
    
    <div class="blockcontent all-themes theme2">
    theme2<br><br>sed do eiusmod tempor incididunt sed do eiusmod eiusmod
    </div>
    
    <div class="blockcontent all-themes theme3 theme2">
    theme2 and theme3<br><br>consectetur adipiscing elit,consect adipiscing elit, 
    </div>
    
    <div class="blockcontent all-themes theme3">
    theme3<br><br>consectetur adipiscing elit,consect etur adipiscing elit, 
    </div>