How to make a <select> navigation search engine friendly?

Question

I have part of navigation in an HTML page that is routed by a select:

<select id="archive" name="archive">
 <option value="">Select an option</option>
 <option value="1">001</option>
 <option value="2">002</option>
 <option value="3">003</option>
</select>

I can't change the design, but I'm pretty sure that search engines can't navigate to URLs generated on select change by jQuery.

Would this solve the issue?

<select id="archive" name="archive">
 <option value="">Select an option</option>
 <option value="1"><a href="http://mylink.com/01">001</a></option>
 <option value="2"><a href="http://mylink.com/02">002</a></option>
 <option value="3"><a href="http://mylink.com/03">003</a></option>
</select>

There isn't any dynamic sitemap on the website.

Answer 1

I wouldn't be surprised if Google is already able to cope with this navigation "pattern", as it is reasonably common and Google is "good" at processing JavaScript these days.

However, this could be made more accessible (for both users and search engine bots) if you ensure that these form elements are indeed contained within a form, with a specific action and submit button (if you aren't doing this already). All these additional form elements can be overridden/hidden with JavaScript at the time your page is initialised.

There isn't any dynamic sitemap on the website.

Although this is certainly one instance where a sitemap (XML and/or HTML) would be beneficial.

Making sure these URLs are linked to from some other place would also be advisable.

<option value="1"><a href="http://mylink.com/01">001</a></option>

This doesn't look like a good idea. Is this even valid HTML? And if it's not valid HTML then browser behaviour could be erratic, causing you more problems.