2023.11.21 | admin | 70次围观
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就可以生效,实现跳转。功能代码如下:
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论