HTML选择禁用选项在FireFox中返回错误的selectedIndex
我有一个Select与禁用Option这是默认选择一个：
<select name="select" size="1">
<option>0</option>
<option selected disabled>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
如果我得到选择，它返回1 。 一切还好。
但是，如果我打开弹出框并将光标悬停在另一个Option （例如'4'）
并通过ESC或通过点击其他任何地方取消它。
Select输入显示旧值1但返回得到选定4 。
jsfiddle示例
Chrome不会发生FireFox（4/5）
看起来，当你以这种方式退出你的选择时，显示不会改变，但是firefox正在寻找一个不同的selectedValue，因为它发现当前选择的选项被禁用，这在firefox眼中应该是不可能的。
onChange事件直到onBlur事件（即selectedValue被更改，但这不是显示更改为）时才被触发。 如果我们要在onChange事件中重置我们的值，则可能会再次调用此事件。 因此，通过使用onBlur事件，我们可以提供以下解决方法：
onBlur="javascript:document.getElementsByName('select')[0].selectedIndex = document.getElementsByName('select')[0].selectedIndex;"
http://jsfiddle.net/aRMpt/22/
我希望我在这里有意义。
下面的代码很难看，但它确实是你想要的（我认为）。 基本上，我拦截所有onChange事件，并且只有在对应的onClick事件导致更改的值时才处理它们。 还注意到更改事件在点击事件之前处理。 编辑：只是介绍了这不适用于铬，所以我添加了一些浏览器检测代码，以便它只在Firefox执行。
注意：如果用户已将选项框标签并用错误键进行了更改，则当前代码将不起作用，但下面的方法也可轻松适用于处理该情况。 您只需按照向上箭头或向下箭头或TAB或ENTER键的方式处理关键事件，方法与下面的处理点击方式相同，但仅在选择框具有焦点时进行。
注2：玩这个更多，这种行为是非常奇怪的。 如果您退出选择，onChange事件不会被触发，但会被保存起来。 如果在以后的任何时间点击屏幕上的任何位置，则会触发onChange事件，以查找您在转义时悬停的值，即使该值在您转义后实际发生了更改。 所以这变得棘手。 我想你可能需要分开处理这两个案件。 一个处理点击的案例，一个处理逃跑出局（帕特里克回答）。
它变得毛茸茸的，我看不出优雅的方式来编码。 如何在文本框旁边的用户提示“您当前选择的选项1不再可用”。 然后你可以有一个只有可用选项的选择框。
<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>
检测esc键并重置它，这里是一个使用jQuery的例子（和你的代码）
$('select').keyup(function(e) {
if (e.keyCode == 27) {
document.getElementsByName('select')[0].selectedIndex = 1;
}
});
更新没有jQuery解决方案
更新2抽象出可重用的事件和键码。
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>
上一篇: HTML Select with disabled Option returns wrong selectedIndex in FireFox