单选按钮、复选框、下拉框的回显

1、单选按钮radio的回显
2、复选框checkbox的回显
3、下拉框select的option回显

在前端页面中，经常需要根据需要来进行信息的回显，如果是普通的文本，那么用input框进行回显好就好了，有时会有单选按钮radio、复选框checkbox、下拉框select和option，需要根据特定的情况来自动选中单选按钮，自动勾选复选框，自动设置好下拉框的option等。其实主要是在html的js代码，弄过好几次了，老是忘记，所以在这里记录一下。

1、单选按钮radio的回显

先看表：

根据sex字段的值来设置单选按钮radio的选中，0选中女，1选中男。

代码如下：

public class User {private Integer id;private String name;private Integer sex;private Date birth;private String address;private Integer pro;private String email;private String favo;public String getFavo() {return favo;}public void setFavo(String favo) {this.favo = favo;}public Integer getPro() {return pro;}public void setPro(Integer pro) {this.pro = pro;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getSex() {return sex;}public void setSex(Integer sex) {this.sex = sex;}public Date getBirth() {return birth;}public void setBirth(Date birth) {this.birth = birth;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}
}

dao层相关：

/*** @Description* @ClassName UserDao* @Author yanchengzhi* @date 2021.06.20 17:13*/
public class UserDao {/** @description: 获取所有用户信息* @param: []* @return: List<User>* @author: yanchengzhi* @date: 2021/6/20 17:13*/public User getFirstUser(){String sql = "select id,name,sex,birth,address,pro,email,favo from user limit 0,1";Connection connection = DataSourceManager.getConnection();PreparedStatement ps = null;ResultSet resultSet = null;try {ps = connection.prepareStatement(sql);resultSet = ps.executeQuery();while (resultSet.next()) {User u = new User();u.setId(resultSet.getInt("id"));u.setName(resultSet.getString("name"));u.setSex(resultSet.getInt("sex"));u.setBirth(resultSet.getDate("birth"));u.setAddress(resultSet.getString("address"));u.setPro(resultSet.getInt("pro"));u.setEmail(resultSet.getString("email"));u.setFavo(resultSet.getString("favo"));return u;}} catch (Exception e) {e.printStackTrace();} finally {DataSourceManager.closeConnection(connection);DataSourceManager.closeStatement(ps);DataSourceManager.closeResultSet(resultSet);}return null;}}

servlet相关：

页面相关：

<%--Created by IntelliJ IDEA.User: 17605Date: 2021/6/20Time: 16:39To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head><title>用户信息展示页面</title><script type="text/javascript" src="/servlet_demo/static/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<table border="1" style="width: 100%; border-collapse: collapse;"><thead><tr style="height: 50px;"><th>姓名</th><th>性别</th><th>生日</th><th>兴趣爱好</th><th>地址</th><th>省份</th><th>邮箱</th></tr></thead><tbody><c:if test="${not empty requestScope.user}"><input type="text" id="me" value="${user.sex}" style="display: none;"/><tr style="text-align: center;height: 50px;"><td>${user.name}</td><td><input type="radio" name="sex" value = "0" /> 女<input type="radio" name="sex" value = "1" /> 男</td><td>${user.birth}</td><td><input type="checkbox" name="favo" value="1" /> 唱歌<input type="checkbox" name="favo" value="2" /> 阅读<input type="checkbox" name="favo" value="3" /> 徒步<input type="checkbox" name="favo" value="4" /> 旅行</td><td>${user.address}</td><td><select name="pro" id="pro" style="width: 100px;"></select></td><td>${user.email}</td></tr></c:if><c:if test="${empty requestScope.user}"><tr style="text-align: center;height: 50px;"><td style="text-align: center;" colspan="5">暂无任何信息！</td></tr></c:if></tbody><tfoot></tfoot>
</table>
<script>// 根据value值回显单选radio
var sexValue = $('#me').val();
$(':radio[name="sex"][value="'+ sexValue +'"]').prop("checked","checked");</script>
</body>
</html>

效果：

根据value值成功的勾选了男，最主要的就js里的一句代码：

2、复选框checkbox的回显

原理都一样，都是根据value值来设置选中的。

只用改页面代码：

以上均为添加内容，效果：

复选框根据后端返回的value值自动勾选了，没问题。

3、下拉框select的option回显

相关代码：

public class ProvinceDao {/** @description: 获取所有省份* @param: []* @return: java.util.List<com.ycz.domain.Province>* @author: yanchengzhi* @date: 2021/6/20 19:04*/public List<Province> getAllProvinces(){List<Province> provinces = new ArrayList<>();String sql = "select id,name,description from province";Connection connection = DataSourceManager.getConnection();PreparedStatement ps = null;ResultSet resultSet = null;try {ps = connection.prepareStatement(sql);resultSet = ps.executeQuery();while (resultSet.next()) {Province p = new Province();p.setId(resultSet.getInt("id"));p.setName(resultSet.getString("name"));p.setDescription(resultSet.getString("description"));provinces.add(p);}} catch (Exception e) {e.printStackTrace();} finally {DataSourceManager.closeConnection(connection);DataSourceManager.closeStatement(ps);DataSourceManager.closeResultSet(resultSet);}return provinces;}
}

前端页面的添加内容：

效果：

option是根据值value来自动选中的，并不是我选中的。

完整的jsp页面代码如下：

<%--Created by IntelliJ IDEA.User: 17605Date: 2021/6/20Time: 16:39To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head><title>用户信息展示页面</title><script type="text/javascript" src="/servlet_demo/static/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<table border="1" style="width: 100%; border-collapse: collapse;"><thead><tr style="height: 50px;"><th>姓名</th><th>性别</th><th>生日</th><th>兴趣爱好</th><th>地址</th><th>省份</th><th>邮箱</th></tr></thead><tbody><c:if test="${not empty requestScope.user}"><input type="text" id="me" value="${user.sex}" style="display: none;"/><input type="text" id="me2" value="${user.pro}" style="display: none;"/><input type="text" id="me3" value="${user.favo}" style="display: none;"/><tr style="text-align: center;height: 50px;"><td>${user.name}</td><td><input type="radio" name="sex" value = "0" /> 女<input type="radio" name="sex" value = "1" /> 男</td><td>${user.birth}</td><td><input type="checkbox" name="favo" value="1" /> 唱歌<input type="checkbox" name="favo" value="2" /> 阅读<input type="checkbox" name="favo" value="3" /> 徒步<input type="checkbox" name="favo" value="4" /> 旅行</td><td>${user.address}</td><td><select name="pro" id="pro" style="width: 100px;"></select></td><td>${user.email}</td></tr></c:if><c:if test="${empty requestScope.user}"><tr style="text-align: center;height: 50px;"><td style="text-align: center;" colspan="5">暂无任何信息！</td></tr></c:if></tbody><tfoot></tfoot>
</table>
<script>// 动态添加option$.ajax({url: '/servlet_demo/myServlet.do?COMMAND=GET_ALL_PRO',type: 'get',dataType: 'json',success: function(result) {var content = "";for(var i=0;i<result.length;i++) {content += '<option value="' + result[i].id + '">' + result[i].name + '</option>';}$('#pro').html(content);// 根据value值回显optionvar proValue = $('#me2').val();$('#pro option[value="' + proValue + '"]').attr("selected","selected");}});// 根据value值勾选复选框var favos = $('#me3').val().split(","); // 分割获取字符串数组// 获取所有复选框的value值var ids = new Array();// 所有复选框var boxes = $('input[name="favo"]');for(var i=0;i<boxes.length;i++){ids.push(boxes[i].defaultValue);}for(var i=0;i<ids.length;i++){for(var j=0;j<favos.length;j++){if(ids[i] == favos[j]) {$('input[name = "favo"][value="' + favos[j] + '"]').attr('checked',true);}}}// 根据value值回显单选radiovar sexValue = $('#me').val();$(':radio[name="sex"][value="'+ sexValue +'"]').prop("checked","checked");</script>
</body>
</html>

最终效果：

单选按钮、复选框、下拉框回显都是成功的。

最主要的是js的3行代码：

单选按钮、复选框、下拉框的回显相关推荐

webdriver--单选、复选及下拉框的定位
单选radiobutton的操作两种情况,一种是各个button元素的属性都有唯一定位值,可以直接用属性唯一值定位:另一种就是一组各方面属性值都一样的radiobutton,除了text,可以用组元 ...
[html] 制作一个多选的下拉框
[html] 制作一个多选的下拉框定义盒子 a标签绑定事件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
oracle 字段以逗号结尾的更新数据库_Oracle数据库某个字段的值为逗号分隔的多个值组成的字符串，以一个多选的下拉框进行查询...
某个字段的值为逗号分隔的多个值组成的字符串,现在需要通过一个可以多选的下拉框进行条件查询. 首先将该下拉框的值在后台获取后封装进一个String数组中,如; params.put("syst ...
tkinter绘制组件（10）——组合框/下拉框
tkinter绘制组件(10)--组合框/下拉框引言构思样式与功能(初次构想) 样式与功能(二次构想) 布局函数结构闭合状态下拉框选项框整合选项框展开与闭合完整代码函数效果测试代 ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
jquery获取单选框复选框下拉框值
jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用.有什么疑问可以留言效果图: html代码: <!DOCTYPE html> <h ...
html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
select2 多选的下拉框报错Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
报错原有: select2使用多选下拉框,<input select2 select2-model="entity.brandIds" config="brand ...
JavaScript案例全选获取下拉框选中的值
<script type="text/javascript">function choice(obj){var checkbox = document.getEleme ...

单选按钮、复选框、下拉框的回显

单选按钮、复选框、下拉框的回显

1、单选按钮radio的回显

2、复选框checkbox的回显

3、下拉框select的option回显

单选按钮、复选框、下拉框的回显相关推荐

最新文章

热门文章