Here's my code:

<select style="color:#000000">
<option onclick="window.location.href='/state/FL/1/city/asc'">Sort by City ASC</option>
<option onclick="window.location.href='/state/FL/1/city/desc'">Sort by City DESC</option>
<option onclick="window.location.href='/state/FL/1/name/asc'">Sort by Name ASC</option>
<option onclick="window.location.href='/state/FL/1/name/desc'">Sort by Name DESC</option>
<option onclick="window.location.href='/state/FL/1/dist/asc'">Sort by Distance Nearest</option>
<option onclick="window.location.href='/state/FL/1/dist/desc'">Sort by Distance Furthest</option>

You cannot see the end select tag but its there. It's not changing the page when I click an option using chrome but it works for firefox.

Not quite sure how to fix this.

Onclick events on options are very inconsistent, so you should set an event on change, which in contrary, is supported in browsers. Also, inline javascript should be avoided - so give your select an id and do the following:

<select id="selectId" style="color:#000000">
<option value="/state/FL/1/city/asc">Sort by City ASC</option>
<option value="/state/FL/1/city/desc">Sort by City DESC</option>
<option value="/state/FL/1/name/asc">Sort by Name ASC</option>
<option value="/state/FL/1/name/desc">Sort by Name DESC</option>
<option value="/state/FL/1/dist/asc">Sort by Distance Nearest</option>
<option value="/state/FL/1/dist/desc">Sort by Distance Furthest</option>
</select>

JS:

document.getElementById('selectID').addEventListener('change', e => {
    window.location.href = e.target.value;
});

more