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

2024-01-18 13:34| 来源: 网络整理| 查看: 265

单选按钮、复选框、下拉框的回显 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 * @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相关：在这里插入图片描述

在这里插入图片描述页面相关：

用户信息展示页面姓名性别生日兴趣爱好地址省份邮箱 ${user.name} 女男 ${user.birth} 唱歌阅读徒步旅行 ${user.address} ${user.email} 暂无任何信息！ // 根据value值回显单选radio var sexValue = $('#me').val(); $(':radio[name="sex"][value="'+ sexValue +'"]').prop("checked","checked");

效果：在这里插入图片描述根据value值成功的勾选了男，最主要的就js里的一句代码：

2、复选框checkbox的回显

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

只用改页面代码：在这里插入图片描述以上均为添加内容，效果：复选框根据后端返回的value值自动勾选了，没问题。

3、下拉框select的option回显

相关代码：在这里插入图片描述

public class ProvinceDao { /* * @description: 获取所有省份 * @param: [] * @return: java.util.List * @author: yanchengzhi * @date: 2021/6/20 19:04 */ public List getAllProvinces(){ List 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页面代码如下：

用户信息展示页面姓名性别生日兴趣爱好地址省份邮箱 ${user.name} 女男 ${user.birth} 唱歌阅读徒步旅行 ${user.address} ${user.email} 暂无任何信息！ // 动态添加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 ids.push(boxes[i].defaultValue); } for(var i=0;i if(ids[i] == favos[j]) { $('input[name = "favo"][value="' + favos[j] + '"]').attr('checked',true); } } } // 根据value值回显单选radio var sexValue = $('#me').val(); $(':radio[name="sex"][value="'+ sexValue +'"]').prop("checked","checked");

最终效果：在这里插入图片描述单选按钮、复选框、下拉框回显都是成功的。

最主要的是js的3行代码：在这里插入图片描述

【本文地址】

公司简介

联系我们