开发者

Select onChange go to specified URL, but has to remain accessible?

I have multiple select drop-downs on a web page. Each of those drop-downs' options link to a different page, via a defined "gotosite(this)" JS function.

So an example of the drop-downs would be:

<select onchange="gotothissite();">
    <option value="">Choose your destination</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
    <option value="http://netflix.com">Netflix</option>
</select>

The client has requested that we make these drop-downs accessible. Right now, these drop-downs aren't keyboard-navigable (especially in IE), since the onchange event handler fires immediately on the first option a user selects that has a non-empty value. BUT! The client also wants to retain the existing functionality for regular users, so that all they have to do is select an option, and it sends them to that site without any further user actions necessary.

At first I th开发者_开发百科ought of just binding an onClick to the option tags, but that doesn't work in IE.


  1. Replace the form control with a list (<ul>) of links.
  2. Use JavaScript to hide it and prefix it with a <button>
  3. Bind a click event to the button that toggles the display of the list.


You can add a form around the select field which would redirect the browser to the selected address. Also you will need a button to submit the form.


I'm sure this is too late to be useful for the original asker, but if anyone else finds their way here looking for an answer, it might be worth looking at Cameron Adams' solution from 2004 http://www.themaninblue.com/writing/perspective/2004/10/19/.

Then again, I note that with JQuery's change() event (see http://api.jquery.com/change/), "the event is deferred until the element loses focus. That sounds like it should be accessible in IE - although I don't have the means to test that easily myself. I guess you could also provide a submit button wrapped inside noscript tags to provide some functionality for users without js.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜