清除页面退出时的下拉 select 值，因此后退按钮 return 可能会重新 select

Question

我基本上是在这里回答问题，但也许有人有其他想法。您可以使用 onpopstate 函数，但我发现这更容易处理并且跨浏览器兼容，即使是旧浏览器也是如此。

我有一个由数据库查询填充的下拉 select 框。在这种情况下，它只找到了一个相关城市。选择那个城市，将用户带到另一个页面，然后按下后退按钮，returns 用户进入页面，selection 仍然处于 selected 状态，这阻止了它免于再次 selected，除非先制造另一个 selection。所以我在离开页面之前添加了一个 onClick 事件来更改 Selected 默认值。

HTML

<div>
    <select class="DropList"  name="CitySelect" id="CitySelect"
        onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}"
        onclick="GetSelect()">
        <option value="" selected>Select City</option>
        <option value="city.php?s=Montana&cn=Yellowstone&CalNav=0&c=Billings">Billings</option>
    </select>
</div>

JavaScript

<script type="text/javascript">
    function GetSelect()
    {
        document.getElementById('CitySelect').value = "";
    }
</script>

Answer 1

监听点击事件并不理想，原因如下：

当您单击 select 打开它时触发它，而不是当您实际 select 一个选项时触发。因此，当您打开 select 时，您的代码会清除该值，这会导致一些抖动。
如果您使用键盘 select 一个值，则不会触发。

所以我建议使用模糊事件：

$('#CitySelect').on('blur', (e) => (e.target.value = ''));

在 select 输入该值后，select 字段仍将具有新值，但一旦您离开该字段（“模糊”它），该值就会重置。

查看this fiddle

清除页面退出时的下拉 select 值，因此后退按钮 return 可能会重新 select

Clearing drop-down select value on page exit so back button return may reselect

html

javascript

select

drop-down-menu