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-。选择框中也进行了更改，并且还执行了事件。

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

2 个答案: