0

这看起来应该很容易，但<select>对象的局限性相当令人恼火。我有一个带有四个选项的选择框，当您导航到一个页面时，该选项设置为您所在的页面。我想让它让用户可以通过选择相同的选项来刷新页面 - 即选择已经选择的选项。

不幸的是，该onclick事件不适用于跨浏览器。大多数人建议使用onchange，但这在我所说的情况下不起作用。我一直采用的方法是在顶部添加一个额外的项目，该项目包含当前选择的内容，单击时不执行任何操作，然后在触发 onchange 事件后切换到该选项，以便用户重新选择该选项他们实际上正在改变。不过这很尴尬，因为下拉菜单中有两个相同的项目，我不应该这样做。

有什么好的跨浏览器方式来解决这个问题？一些不太复杂的东西和常规 JavaScript 中的东西会更好。

4

2 回答 2

0

这可能会有所帮助：

function onFocus(element){
    element.setAttribute('old-value',element.value);
    element.value='';
    console.log('reset');
}

function onBlur(element){
    if(element.value=='')
        element.value = element.getAttribute('old-value');
    element.removeAttribute('old-value');   
}

function onChange(element){
    console.log('New Value : '+ element.value);
}
<select id="mySelect"  onfocus="onFocus(this)" onchange="onChange(this)" onblur="onBlur(this);">
    <option value="" style="display:none;"></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

于 2012-12-07T17:08:06.523 回答
-1

给你解决方案

$("select[id=mySelect] option").click(function(){
    alert("HI");
});

这将在每次单击选项时提醒 -HI-。在选择框中也进行了更改，并且还执行了事件。

于 2012-12-07T20:26:38.930 回答