在选择框中单击已选择的选项

Question

这似乎很容易，但是<select>对象的局限性令人不快。 我有一个带有四个选项的选择框，当您导航到页面时，该选项将设置为您所在的页面。 我要这样做，以便用户可以通过选择相同的选项（即选择已选择的选项）来刷新页面。

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

什么是解决此问题的跨浏览器的好方法？ 不太复杂的东西和常规JavaScript中的东西将是更好的选择。

Answer 1

这可能会有所帮助：

 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> 

Answer 2

解决方案在这里

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

每次单击选项时，都会发出-HI-警报。 在选择框中也进行了更改，并且还执行了事件。