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

这似乎应该很容易，但<select>对象的局限性是相当令人生气的。我有一个包含四个选项的选择框，当您导航到某个页面时，该选项将设置为您所在的页面。我想让用户可以通过选择相同的选项来刷新页面 - 也就是说，选择已经选择的选项。点击已选择的选项在选择框中

不幸的是，onclick事件在浏览器中不起作用。大多数人推荐使用onchange，但在我谈论的情况下这不起作用。我一直在采取的方法是在顶部添加一个额外的项目，它保存当前选中的内容，点击时不做任何事情，然后在触发onchange事件后切换到该选项，以便当用户重新选择该选项时他们实际上在变化。虽然这很尴尬，因为在下拉菜单中有两个相同的项目，我不应该这样做。

什么是一种很好的跨浏览器方式来解决这个问题？一些不太复杂的东西以及常规JavaScript中的某些内容会更可取。

来源

2012-12-07 Andrew Latham

从用户界面的角度来看，您刷新网站的方式看起来不太好。为用户制作更简单的东西也会让你更容易编码。想想吧:) – Alvaro

我同意史蒂夫。这是选择框控件的非标准使用。您最好在某处使用小型刷新图标（或让用户按F5）。 –

这不是我的想法，但是当我在进行走廊可用性测试时，人们一直试图去做它的选择。 –

这可能帮助：

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-07 17:08:06

这将是伟大的，除了用户必须在选择框之外点击选择框后。 –

-1

在这里，您与解决方案

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

去这将提醒-HI-每次点击上的选择做出。选择框中也进行了更改，并且还执行了事件。

来源

2012-12-07 20:26:38

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

回答

相关问题