select、checkbox的值丢失或改变 || 根据后端返回值来确定select、checkbox的选中状态 || 使用JS改变select的选中状态

最新推荐文章于 2022-04-22 11:28:36 发布

请不要为难我胖虎

最新推荐文章于 2022-04-22 11:28:36 发布

阅读量590

点赞数

分类专栏：错误处理文章标签： html js checkbox html5

本文链接：https://blog.csdn.net/nieyuhu/article/details/107365186

版权

在查询页面中，当页面跳转后，select的值变为默认，checkbox状态改变。原因是页面被刷新导致数据丢失。为解决此问题，可以采用Ajax避免页面跳转，或者利用JS根据后端返回值动态设置select和checkbox的状态。在某些情况下，直接使用selected或checked属性可能无效，需要通过遍历并比较后端返回值来设置元素状态。

摘要由CSDN通过智能技术生成

问题描述

在具体业务中，多次遇到以下问题：在一个查询页面中，原本选中了select框中的某个值，进行查询后（发生了页面跳转，跳转到原本的查询页面）select变为默认值；原本选中了的checkbox在查询后变成了未选中。
用后端返回值来确定checkbox、select的状态，直接用select的option中的selected属性或checkbox的checked属性接收返回值无效。

问题原因

这个问题的原因是查询时发生了页面跳转（原页面→后端→原页面），实际上相当于原页面被刷新了，所以checkbox和select的值被重置，有些浏览器可以保持状态，而有一些不行（比如IE）。如果使用Ajax进行查询，不对原页面进行刷新，原来的状态就可以保持。

解决方案

1.用Ajax来获取数据，不要进行页面跳转。

2.JS控制

因为直接用select的option中的selected属性或checkbox的checked属性接收返回值无效（springboot+thymeleaf有效，Struts2无效）。所以考虑使用js来控制。
因为原操作相当于刷新了页面，所以使用window.onload每当页面加载时就根据返回值确定状态。
！！新问题出现
$("#test").find("option[text='选项2']").attr("selected",true