0%

4.1.10 select标签 4.1.11option标签 4.1.12options标签

发表于 更新于 分类于 ，

4.1.10 select标签

领域对象

User.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 域对象，实现序列化接口
public class User
    implements Serializable
{
    private static final long serialVersionUID = 1L;
    // 部门编号
    private Integer deptId;
    public User()
    {
        super();
        // TODO Auto-generated constructor stub
    }
    // 此处省略getter和setter方法,请自己补上
}

Dept

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class Dept
    implements Serializable
{
    private static final long serialVersionUID = 1L;
    private Integer id;
    private String name;
    public Dept()
    {
        super();
        // TODO Auto-generated constructor stub
    }
    public Dept(Integer id, String name)
    {
        super();
        this.id = id;
        this.name = name;
    }
    // 此处省略getter和setter方法,请自己补上
}

select option标签

测试链接

1
<a href="selectForm">selectForm</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
@GetMapping(value = "/selectForm")
public String selectForm(Model model)
{
    User user = new User();
    // 设置deptId的值，页面的select下拉框对应的option项会被选中
    user.setDeptId(2);
    model.addAttribute("user", user);
    return "selectForm";
}

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--绑定模型中的user属性 -->
<form:form modelAttribute="user" method="post" action="selectForm">
    <table>
        <tr>
            <td>部门:</td>
            <!-- 绑定user属性表示的对象中的depathID成员变量 -->
            <!-- 如果该成员变量与下面的option标签的value属性的属性值相等的话 -->
            <!-- 就默认选中该选项 -->
            <td><form:select path="deptId">
                    <form:option value="1">财务部</form:option>
                    <form:option value="2">开发部</form:option>
                    <form:option value="3">销售部</form:option>
                </form:select></td>
        </tr>
    </table>
</form:form>

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--绑定模型中的user属性 -->
<form id="user" action="selectForm" method="post">
    <table>
        <tr>
            <td>部门:</td>
            <!-- 绑定user属性表示的对象中的depathID成员变量 -->
            <!-- 如果该成员变量与下面的option标签的value属性的属性值相等的话 -->
            <!-- 就默认选中该选项 -->
            <td>
                <select id="deptId" name="deptId">
                    <option value="1">财务部</option>
                    <option value="2" selected="selected">开发部</option>
                    <option value="3">销售部</option>
                </select>
            </td>
        </tr>
    </table>
</form>

可以看到第二个选项设置了selected="selected"属性,该选型会默认选中.具体选中哪个选项通过设置绑定的对象的对应属性的值来设定,对象的值和选项的value属性相等的会被默认选中.

显示效果

这里有一张图片

select标签 map作为数据源

测试链接

1
<a href="selectForm2">selectForm2</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@GetMapping(value = "/selectForm2")
public String selectForm2(Model model)
{
    User user = new User();
    // key为2的将会被选中
    user.setDeptId(2);
    // 页面展现的可供选择的select下拉框内容deptMap
    Map<Integer, String> deptMap = new HashMap<Integer, String>();
    deptMap.put(1, "财务部");
    deptMap.put(2, "开发部");
    deptMap.put(3, "销售部");
    model.addAttribute("user", user);
    model.addAttribute("deptMap", deptMap);
    return "selectForm2";
}

表单标签库

1
2
3
4
5
6
7
8
9
<form:form modelAttribute="user" method="post" action="selectForm2">
    <table>
        <tr>
            <td>部门:</td>
            <td><form:select path="deptId" items="${deptMap}" />
            </td>
        </tr>
    </table>
</form:form>

form标签的modelAttribute="user"表示绑定model中的user属性也就是user对象.
Spring MVC的select标签的path="deptId"属性表示该select标签绑定user对象的deptId成员变量,

渲染结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form id="user" action="selectForm2" method="post">
    <table>
        <tr>
            <td>部门:</td>
            <td>
                <select id="deptId" name="deptId">
                    <option value="1">财务部</option>
                    <option value="2" selected="selected">开发部</option>
                    <option value="3">销售部</option>
                </select>
            </td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片
使用这种方式将使用map中的值作为显示文本,使用key作为option标签的value属性

options标签

select option标签 map数据源

测试链接

1
<a href="selectForm3">selectForm3</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@GetMapping(value = "/selectForm3")
public String selectForm3(Model model)
{
    User user = new User();
    user.setDeptId(2);
    // 页面展现的可供选择的select下拉框内容deptMap
    Map<Integer, String> deptMap = new HashMap<Integer, String>();
    deptMap.put(1, "财务部");
    deptMap.put(2, "开发部");
    deptMap.put(3, "销售部");
    model.addAttribute("user", user);
    model.addAttribute("deptMap", deptMap);
    return "selectForm3";
}

表单标签数据绑定

1
2
3
4
5
6
7
8
9
10
<form:form modelAttribute="user" method="post" action="selectForm">
    <table>
        <tr>
            <td>部门:</td>
            <td><form:select path="deptId">
                    <form:options items="${deptMap}" />
                </form:select></td>
        </tr>
    </table>
</form:form>

使用map作为数据源的options标签时,使用map的key作为option标签的value属性的值,使用map的value作为显示文本。

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form id="user" action="selectForm" method="post">
    <table>
        <tr>
            <td>部门:</td>
            <td>
                <select id="deptId" name="deptId">
                    <option value="1">财务部</option>
                    <option value="2" selected="selected">开发部</option>
                    <option value="3">销售部</option>
                </select>
            </td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片

select options绑定Object列表

在实际开发中,经常会出现一种情况,即select下拉框中的数据来自于数据库的表数据,并且获取的数据被封装到JavaBean中。此时,就可以使用select标签或者**options标签的items、itemLabel和itemValue属性**来加载数据。

测试链接

1
<a href="selectForm4">selectForm4</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@GetMapping(value = "/selectForm4")
public String selectForm4(Model model)
{
    User user = new User();
    user.setDeptId(2);
    // 页面展现的可供选择的select下拉框内容deptList，其中的元素的Dept对象
    // 模拟从数据库获取到部门信息封装到对象当中
    List<Dept> deptList = new ArrayList<Dept>();
    deptList.add(new Dept(1, "财务部"));
    deptList.add(new Dept(2, "开发部"));
    deptList.add(new Dept(3, "销售部"));
    model.addAttribute("user", user);
    model.addAttribute("deptList", deptList);
    return "selectForm4";
}

在selectForm4方法中模拟从数据库中获取部门信息,并将其封装到Dept对象中,且将多个部门信息装载到List集合中,最后添加到Model当中。

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<form:form modelAttribute="user" method="post" action="selectForm">
    <table>
        <tr>
            <td>部门:</td>
            <td><form:select path="deptId">
                    <!--itemLabel表示该对象的要显示的提示文本 -->
                    <!--itemValue表示使用显示该对象的id成员变量的值作为option标签的value属性 -->
                    <form:options items="${deptList}"
                        itemLabel="name" itemValue="id" />
                </form:select></td>
        </tr>
    </table>
</form:form>

selectForm4.jsp页面的options标签的items标签加载Model中的deptList,并将集合中的Dept对象的id属性设置为option的value,name属性设置为option的label。

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form id="user" action="selectForm" method="post">
    <table>
        <tr>
            <td>部门:</td>
            <td>
                <select id="deptId" name="deptId">
                    <option value="1">财务部</option>
                    <option value="2" selected="selected">开发部</option>
                    <option value="3">销售部</option>
                </select>
            </td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片

原文链接: 4.1.10 select标签 4.1.11option标签 4.1.12options标签