JavaScript - 已选择选项的 HTML 选择元素 onchange 触发器答案

【问题标题】：JavaScript - HTML select element onchange trigger for already selected optionJavaScript - 已选择选项的 HTML 选择元素 onchange 触发器
【发布时间】：2013-01-12 19:26:38
【问题描述】：

目标： 每当有人从下拉列表中选择选项时加载 href 值 - 即使该选项已被选中。

问题： 尽管下面的代码可以工作，但当某些选项已被选中（单击）时它不起作用。例如，假设我点击了“按价格”选项。将加载新页面（正常），默认选择“按价格”选项，现在它位于“按名称”选项上方的列表顶部。

现在我想再次选择“按价格”选项现在加载页面将无法正常工作。

HTML：

<select name="" class="inputbox" size="1" onchange="window.top.location.href=this.options[this.selectedIndex].value">
    <option value="/index.php/by,product_name">By name</option>
    <option value="/index.php/by,mf_name">By MF</option>
    <option value="/index.php/by,product_price">By price</option>
    <option value="/index.php/by,product_special">By type</option>
</select>

【问题讨论】：

您是change 事件的绑定，该事件仅在您更改选择时触发。尝试click、keyup、mouseup 或类似的，甚至它们的组合，以涵盖选择值的几种可能方式。
刚刚试过。它有效，但只是部分有效，因为它甚至不允许我选择其他选项。一旦我点击下拉菜单，它就会被触发，所以它不适合我的场景。
与用户熟悉的内容背道而驰，因为一旦选择了一个选项，他们就知道当您尝试 clcik 相同的选项时不会发生任何事情......听起来像是一个 UI 设计问题。添加refresh 按钮
或许用可点击列表替换选择
必须做一些不同的事情...无法在已选择的选项上触发事件。

标签： javascript jquery html

【解决方案1】：

$('select').blur(function(){
    window.location = $('option:selected', this).val();
});

始终以您想要的方式捕捉模糊效果。

The working jsFiddle...

【讨论】：

值得一试和好主意...尽管对用户来说仍然不直观...必须先单击页面中的其他位置...当然看起来像 refresh 按钮对我来说更有意义
我以此为起点，并按照 charlietfl 的建议添加了类似刷新按钮的内容。看起来不错！

【解决方案2】：

在您的选择框中添加一个空选项。如果要选择已选择的内容，请先选择此空白选项，然后再选择您想要的选项。这样就可以了。

<select name="" class="inputbox" size="1" onchange="if(this.options[this.selectedIndex].value) window.top.location.href=this.options[this.selectedIndex].value">
    <option value="">---</option>
    <option value="/index.php/by,product_name">By name</option>
    <option value="/index.php/by,mf_name">By MF</option>
    <option value="/index.php/by,product_price">By price</option>
    <option value="/index.php/by,product_special">By type</option>
</select>

【讨论】：

【解决方案3】：

您不应该制定这样的工作流程，不仅因为它难以对所有浏览器进行维护，而且对于键盘可访问性 (WCAG) 来说也很困难，因此如果您将其绑定到“onchange”，您就不会担心键盘 -当那个东西有焦点时，用户上下按下。

如果在失去焦点时绑定它（onblur）呢？

【讨论】：

【解决方案4】：

将方法绑定到保存选择和删除选择的位置
那么 onchange 将始终被触发。在那里你可以做任何你想做的事（即使使用原始保存的选择）

【讨论】：

【解决方案5】：

由于您无论如何都在加载新页面，重置选中的索引

onchange="var val=this.options[this.selectedIndex].value;
this.selectedIndex=0;
window.top.location.href=val">

【讨论】：