accessible onchange select dropdown

T

tismee

hello,

there is a useful script at http://www.anvandbart.se/accessible-javascript-onchange-select-menu
which does subj.

unforunately, it only looks for <select>s with a hardcoded default
<option> ("select-one").

how do I modify it to make it more generic, i.e. something like with
getElementsByTagName("select") for instance?


PS
looking for a particular form.getElementById("select_id") is not
desirable (if avoidable by another method) as well, since it is Not
known (to me) which 'Id' will be assigned to any dropdown.

---
niceSelect=function(){
var f=document.forms;
for (var i=0;i<f.length;i++){ // Walks all the forms in
the document.
var e=f.elements;
for(var j=0;j<e.length;j++){ // Walks all the elements in
the form.
if(e[j].type=="select-one"){ // Chooses elements that are
select
// box (that does not allow multiple
// selections).
e[j].formnu=i;
// Here comes the "trick" of this
// script: it redefines the
// event handlers of the element.

e[j].onclick=function(){ // If the selection is made
// with the mouse, the it
// behaves like a normal selectbox
// menu and submits).
this.onchange=function(){
f[this.formnu].submit()
}
};
e[j].onblur=function(){ // This "disarms" the onblur
function
// so that it will not submit as soon
// as the default option is deselected
// (by moving down the select list with
// the arrow key).
this.onchange=function(){return true}
};
e[j].onkeydown=function(e){ // When keys are pressed on
the keyboard...
if (e){theEvent = e} else {theEvent=event};
if (theEvent.keyCode==13){ // ...only submit when 'enter'
is pressed.
if((this.onchange+"").indexOf("submit")<0){
f[this.formnu].submit()
}
}
}
}
}
}
}
 
T

tismee

I looked at the example and it appears to be a waste of time.
Select elements are not dropdown menus.

surely, listboxes ain't exactly dropdown menus...
Why try to force them to be something they are not?

it's nice having to click *only once* to make a choice from <select>
when client has a mouse and JS, but not fire an immediate 'onchange'
event for keyboard strokes in said:
If you must stoop to this, you need to use a
form with a submit button.

of course, I do use a submit button with selects.

alas, there are too many not only sites, but even tutorials proposing
<select onchange="location.assign(options[selectedIndex].value)" >.

perhaps, 'onchange' handler above would be useful at least as a mere
demonstration of more proper technic.

so finally, is there an answer to the original question?
 
D

David Mark

so finally, is there an answer to the original question?

Yes. Use an unordered list for your navigation and use JavaScript and/
or CSS to turn it into a dropdown menu. Despite the popularity of the
technique, using a form element for this purpose is wrong.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top