Question

目标： 要在有人从下拉列表中选择选项时加载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>

Answer 1

在选择框中添加一个空选项。如果要选择已选择的内容，请先选择此空选项，然后选择所需选项。这样它就会起作用。

<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>

Answer 2

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

模糊总是以你想要的方式捕捉。

The working jsFiddle...

Answer 3

你不应该制作这样的工作流程，不仅因为它难以维护所有浏览器，而且很难用于键盘访问（WCAG），所以如果你将它绑定到“onchange”，你就不会打扰键盘 - 当用户关注焦点时，用户会向上和向下按压。

如果在失去焦点（onblur）时绑定它会怎么样？

Answer 4

将方法绑定到onfocus，保存选择并删除选择
然后将始终触发onchange。在那里你可以做任何你想做的事情（即使使用原始保存的选择）

Answer 5

因为您无论如何都要加载新页面，重置所选索引

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

JavaScript - 已选择选项的HTML select element onchange触发器

5 个答案: