2023.11.21 | admin | 64次围观
select中option跳转问题
在现在很多网页中都有用到select下拉框，一般用来展示一些信息并进行跳转。
虽然跳转很简单，只用设置其value就可以进行网页的跳转，但是很多人会忽略一个问题，当我们的用户点击其中一个option进行跳转过后，若网页没有刷新，用户再次点击时将不会进行跳转。
这是因为我们一般都是使用onchange事件页面跳转是什么问题，当option改变时就引发当前option的跳转。当我们点击跳转过后，select中的值就会默认选中当前跳转的option的值。当我们再次选择之前的option点击时页面跳转是什么问题，网页将会认为option的内容并没有改变，所以不会触发onchange事件，将不会进行跳转。
解决方法：
1.用户再次点击之前，刷新网页，使得select恢复到默认状态，用户再次点击就可以进行跳转。
2.用户再次点击之前，先点击另外一个option，然后再次点击想要跳转的option即可进行跳转。
3.显然前两种方法不采取的，对于用户的体验太差。我们可以在select添加一个默认样式，并设置成“selected”，如：
当用户点击了触发onchange事件的同时，将select的第一个option的selected的值设为true即可，当用户想再次点击时，select已经恢复成默认样式，这样再点击刚刚那个option就可以生效，实现跳转。功能代码如下：
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论