HTML Select with disabled Parameter returns invalid selectIndex in FireFox

Question

I have Select with the Option disabled by default:

 <select name="select" size="1"> <option>0</option> <option selected disabled>1</option> <option>2</option> <option>3</option> <option>4</option> </select> 

If I get the selected, it returns 1 . Things are good.

But if I open a pop-up window and hover over another Option (for example, “4”) and cancel it through ESC or by clicking elsewhere.

Entering Select shows the old value of 1 , but returns it when 4 selected.

Jsfiddle example

This does not happen only with Chrome FireFox (4/5)

Answer 1

It appears that the display does not change when you exit your selection this way, however firefox looks for another selectedValue because it finds the currently selected option as disabled, which should not be impossible in the eyes of Firefox.

The onChange event did not fire before the onBlur event (when the selected value is selected, but this is not what changed on the display). If we had reset our value in the onChange event, this event could be raised again. Thus, using the onBlur event, we can provide the following workaround:

onBlur="javascript:document.getElementsByName('select')[0].selectedIndex = document.getElementsByName('select')[0].selectedIndex;"

http://jsfiddle.net/aRMpt/22/

Hope I have a point here.

Answer 2

Define the esc key and reset, here is an example using jQuery (and a dash of your code)

 $('select').keyup(function(e) { if (e.keyCode == 27) { document.getElementsByName('select')[0].selectedIndex = 1; } }); 

UPDATE No jQuery Solution

UPDATE 2 An event and code definition has been issued for reuse.

DEMO: http://wecodesign.com/demos/stackoverflow-6923135.htm

 <script type="text/javascript"> function getEvent( event ) { if ( window.event ) return window.event; return event; } function getKeycode ( event ) { if ( event.which ) return event.which; else return event.keyCode; } changeToDefaultListener = function( event ) { theEvent = getEvent( event ); theKeyCode = getKeycode( theEvent ); if( theKeyCode == 27 ) { document.getElementsByName( 'select' )[0].selectedIndex = 1; } }; </script> <select name="select" size="1"> <option>0</option> <option selected disabled>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <a href="javaScript:alert(document.getElementsByName('select')[0].selectedIndex);">getSelected</a> <script type="text/javascript"> document.getElementsByName('select')[0].onkeyup=changeToDefaultListener; </script> 

Answer 3

The following code is ugly, but it does exactly what you want (I think). Basically, I intercept all onChange events and process them only if there is a corresponding onClick event, which leads to a change in value. Also note that change events are processed before click events. EDIT: just redoing this does not work in chrome, so I added browser detection code so that it only runs in firefox.

NOTE. The current code will not work if the user has placed a tab in the selection field and made their changes using the error keys, but the method below can be easily adapted to handle this case. You just need to handle key events, such as the up arrow or down arrow, or TAB or ENTER in the same way that clicks are processed below, but only if there is focus in the selection window.

NOTE 2: Playing with this more, the behavior is very strange. If you avoid the selection, the onChange event does not fire, but it is saved. If at any other time you click anywhere on the screen, the onChange event will be fired for the value that you hovered over when you escaped, although that value was actually changed as soon as you escaped. So it becomes difficult. I think you may have to handle two cases separately. One case for handling clicks and one for controlling outputs (as Patrick answered).

It gets hairy and I don't see an elegant way to code it. How about a note to the user next to the text box that says: "Your currently selected option 1 is no longer available." Then you can have a selection box with only the options available.

 <select name="select" size="1" onChange="handleChange()" onClick="handleClick()" > <option>0</option> <option selected disabled>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br /> <script> var initialValue = document.getElementsByName('select')[0].selectedIndex; var potentialChange; var processClick; function handleClick() { //ignore this code if not firefox if (navigator.userAgent.indexOf("Firefox") === -1) return; var curVal = document.getElementsByName('select')[0].selectedIndex; if (!processClick) return; // a value change click occured, now we actually process it. document.getElementsByName('select')[0].value = potentialChange; } function handleChange() { // save the potential change, which will be used if a real click was detected potentialChange = document.getElementsByName('select')[0].selectedIndex; processClick = (potentialChange !== initialValue); // undo the attempted change, in case of an escape or page click // but only on firefox if (navigator.userAgent.indexOf("Firefox")!=-1) document.getElementsByName('select')[0].value = initialValue; document.getElementsByName('select')[0].value = initialValue; } </script> <a href="javaScript:alert(document.getElementsByName('select')[0].selectedIndex);">getSelected</a> 

Answer 4

The work that I had to use for this was that an event listener was placed in the drop-down list in the click event of the selected parameters. In the event listener function, I set a global boolean value.

 var selectChanged = false; $('#select option:not(:selected)').click(function () { selectChanged = true; }); 

Then, in the code area where I need the highlighted value of the drop-down list, I check the boolean value:

if the boolean value is true, I can use its new value

If the boolean value is false, I can get the value from the Html property (which contains the initial value of the drop-down list).

 var selectValue = selectChanged ? $('#select').val() : $($('#select').outerHtml()).find('option:selected').val() 

It's ugly, I know, but it's the only job I could find.