Shopify: Client-side sorting for collections

sort-collection.css

.reorder-drop-down {
    margin-top:10px; 
    padding:10px; 
    overflow:hidden  
}

.reorder-drop-down label {
    display:inline; 
}

sort-collection.js

jQuery('#reorder-options').change(function() {
 var old_url = '{{ collection.url }}';
 var new_url = old_url.replace(/(alpha-asc|alpha-desc|best-selling|created-desc|created-asc|price-desc|price-asc)/, jQuery(this).val());
 window.location.href = new_url;
});

sort-collection.liquid

<div class="reorder-drop-down"> 
  <label>Reorder this collection</label> 
  <select id="reorder-options" name="reorder-options">
    <option value="alpha-asc"{% if collection.handle contains 'alpha-asc' %} selected="selected"{% endif %}>Alphabetically: A-Z</option> 
    <option value="alpha-desc"{% if collection.handle contains 'alpha-desc' %} selected="selected"{% endif %}>Alphabetically: Z-A</option> 
    <option value="best-selling"{% if collection.handle contains 'best-selling' %} selected="selected"{% endif %}>By Best Selling</option> 
    <option value="created-desc"{% if collection.handle contains 'created-desc' %} selected="selected"{% endif %}>By Created Date: Newest to Oldest</option> 
    <option value="created-asc"{% if collection.handle contains 'created-asc' %} selected="selected"{% endif %}>By Created Date: Oldest to Newest</option> 
    <option value="price-desc"{% if collection.handle contains 'price-desc' %} selected="selected"{% endif %}>By Price: Highest to Lowest</option> 
    <option value="price-asc"{% if collection.handle contains 'price-asc' %} selected="selected"{% endif %}>By Price: Lowest to Highest</option>
  </select>
</div>

I used this codes but it doesn't work on my site.

What is the reason ?