CODEWITHSUNDEEP
javascriptjqueryhtml
Slater
Slater

Reputation: 137

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 thought of just binding an onClick to the option tags, but that doesn't work in IE.

Upvotes: 1

Views: 812

Answers (3)

tttallis
tttallis

Reputation: 186

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.

Upvotes: 0

Aidas Bendoraitis
Aidas Bendoraitis

Reputation: 4003

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943217

  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.

Upvotes: 1

Related Questions