When I click the select element, as expected, I get the dropdown of options (in my case, a list of names). When I type a letter, it will as expected, scroll down to the first name that begins with that letter, but it will also put that name into the select field even tho it has not been selected yet. If you click on the field(not on the option in the dropdown, it leaves the name in the field (instead of a blank or the value that was already in the field), but does not cause the onchange event to occur. This is problematic and can be confusing to users. The onchange event triggers a JavaScript function that fills out a div on the page (using an ajax call to the DB).
Any help or a workaround suggestion would be appreciated.
I find that when you click on the field, that it collapses the select option with the value that the keyboard selected. When you click on something else though or when you tab away, it goes back to the original unchanged value that there was before. So no change actually occurs when the list of options is collapsed.
However, when you press a character to select something and then press tab, then the onchange event occurs.
The problem occurs when someone presses a character to pre-select something and then manually collapses then list of options, right? It is expected for the onchange event to not occur when that happens.
that is exactly what happens. The confusing part is that the user, when she clicks on the field, can think that they have in fact selected that value, and the div that normally gets replaced with different info with the onchange event, does not represent the info for the name that the user thought they have selected. Thanks for the reply, hopefully I can figure out a work around for this issue with google
The workaround is for the user to realise that closing the select list without choosing an option from the list, results in no option being selected. It’s a useful UI element that allows you to not select something if you don’t want to.
I think the confusion comes from the fact, that the value in the element has changed, even though selection has not been made. Since few users are web developers, they would naturally think that they have selected a new value.
The value displayed on the single visible line has changed. The value selected has not changed. You will probably find that the selected entry if there is one is still highlighted if you expand the list out again and that the entry howing when the list is not expanded is NOT highlighted because it isn’t selected.
Am I the only one who thinks that is lousy design, to put a value in a field, even though you have not selected it? What value does that serve?
Ultimately what counts is the option displayed when the control loses focus. At that point any change will trigger the onchange event.
I will have to respectfully disagree. What ultimately counts, is that a user of our web pages see something that makes sense. Having the situation where the user can type a letter, and a name pops into the field, and the user clicks that name (in the field, not in the dropdown), the drop down disappears, and the name remains in the field, but the info in the div is not representative of that name, but still contains the info from the previously selected name because the onchange event has not fired. At that point in time, the user will be looking at the page and would see the name they thought they had selected, but the div would have the info for the previously selected name. In the case of my web page, that div contains buttons, and if they clicked on one of them, it would take them to a different page for the selected student, which since the onchange event didn’t fire, would not be for the student they thought they had selected. Complicated to explain I know, but I just think it is lousy design by Chrome. It doesn’t happen this way in IE.
You’re not going to change Chrome, and what you are complaining about is something that JavaScript has no ability to solve for you. So, perhaps a rethink of the UI is needed, as it seems to be clear that the select list is not a viable solution for you and your students.
How many items are in the drop-down list, and how are they used?
It is a misleading form of operation albeit for what I consider is a very rare scenario. A mouse user is unlikely to select via keyboard. If you’re stuck using <select>s, the best piece of crutchware I can devise is to blur all <select>s whenever the div in question is hovered. That will at least cause the current selection to be re-displayed. Specify the ID of your div as shown:
<script type='text/javascript'> /* Place this block at a point BELOW all <select> elements */
(function()
{
for( var i = 0, id; ( id = arguments[ i ] ); i++ )
lh( document.getElementById( id ) );
function boxBlur( )
{
var boxes = document.getElementsByTagName( 'SELECT' );
for( var i = 0, bx; ( bx = boxes[ i ] ); i++ )
bx.blur();
}
function lh( elem )
{
elem.addEventListener ? elem.addEventListener( 'mouseover', boxBlur, false )
: elem.addEvent( 'onmouseover', boxBlur );
}
})( "theDiv" ); // <- Id of div to be hovered. Multiple IDs can be specified, separated by commas.
</script>
I think you’re right, I can’t change Chrome.
The number of names in the drop down can vary up to thousands. I had originally developed my own autocomplete element for this field, but when the number of names in the drop down got very large, it started to get a little “funky” (how’s that for a technical term, lol). I guess I’ll just have to consider it a educational issue, where users will have to learn to not click in the field to close the dropdown when they see the name in it.
Thanks for your replies.