What is the best way to make jump menu (HTML selec

Question

Every <option> in an HTML <select> will have external URL and should open in new a window. If it's possible to make in CSS and HTML only then good, if not possible without JavaScript then it should be unobtrusive.

Answer 1

The “jump menu” is a discredited navigational device from many years ago that should not be brought back.

Auto-navigate-on-change <select> menus are unsuitable for navigation because:

1. keyboard users will be firing a change event every time they move the selection, making it impossible for them to use the control;

2. non-JavaScript agents (including search engines) won't be able to see or follow the links;

3. form values are retained over page back/forward navigations, making the select show the wrong value after a navigation, making it impossible to select the same option again;

4. users can't use their browser's normal navigational tools like middle-click, ‘open in new tab’ or ‘bookmark link’.

Therefore the ‘best’ way to make a jump menu is not to. If you want something that behaves similarly but doesn't have these disadvantages, go for a <div> that's hidden and re-popped-up by JavaScript, containing plain <a> links pointed at the pages they go to. You can style it to look like a dropdown if you really want, and you can make them open new windows when left-clicked if you must (I wish you wouldn't, though).

Answer 2

You can't open links from <select> elements without Javascript. The way to open a new Window with Javascript is like this:

window.open("http://example.com");

To attach to the <select> element, try this:

$('#selectId').change( function() {
    window.open( $(this).val() );
}

Assuming the URL is set in the value attribute of each <option> element.