Using href links inside <option> tag

Why not ``<option> hrefs? Semantic understanding

The <select> element is purpose-built for form selections. Using it for navigation bends its semantic purpose and can reduce usability, particularly for screen readers and keyboard navigation.

The right tool: <a> within <li>

Instead of (mis)using <select>, create a dropdown menu using <ul> and <li> that contain <a> tags. This approach keeps the semantics intact and improves accessibility.

<ul>
  <li><a href="http://example.com/page1">Go to Page 1</a></li>
  <li><a href="http://example.com/page2">Go to Page 2</a></li>
</ul>


Making <select> behave using onchange

While <select> shouldn't be used for navigation, you might use it for actions like sorting or filtering. In such scenarios, onchange can be useful to respond to user selection.

<select id="sortMenu">
  <option value="sort=newest">Newest</option> <!-- You've got a fast car, but so does everyone these days -->
  <option value="sort=oldest">Oldest</option> <!--  Back to the future? -->
</select>

<script>
  document.getElementById('sortMenu').addEventListener('change', function() {
    var url = window.location.href.split('?')[0] + '?' + this.value;
    window.location.href = url;
  });
</script>


Handling reselections and navigating with care

Note that the onchange event will not trigger if the user reselects the same option. To handle this, you can harness data attributes or manage state with JavaScript.

AJAX and jQuery: Advanced navigation techniques

For UX enhancement, consider AJAX for loading new content without a full page refresh.

$('#sortMenu').on('change', function() {
  $.ajax({
    url: '/get-content',
    type: 'GET',
    data: { sort: this.value },
    success: function(data) {
      $('#content').html(data);
    }
  });
});


And jQuery simplifies window navigation on dropdown change:

$('#navigationMenu').on('change', function() {
  window.location.href = this.value; // Follow the yellow brick road
});


<select> as a presentation changer

Though not ideally employed for navigation, the <select> function can be used effectively for modifying presentation like sorting or toggling views. Ensure your UI/UX design aligns with user expectations.

Embracing accessibility in navigation

In all your navigational designs, don't forget about accessibility. Real links (<a> tags) ensure that your application supports screen readers and keyboard navigation. Here, user diversity matters.