今天是我第一次写博客,开始可能写得不好,但是我相信会越来越好的,加油吧,今天就从解决一个问题开始吧。
今天记录一个问题,在工作中遇到一这个问题,解决下拉框多选问题并且传值到后台的具体实现。废话不多说啦,直接开始来呗:
1、页面中导入需要的js
<script type="text/javascript" src="${path }/myjs/jquery.min.js"></script>
<script type="text/javascript" src="${path }/myjs/bootstrap.min.js"></script>
<script type="text/javascript" src="${path }/myjs/multiple-select.js"></script>
<link rel="stylesheet" href="${path }/mycss/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="${path }/mycss/multiple-select.css" type="text/css"/>
上面是基于bootstrap的,不过bootstrap也是依赖于jquery的,所以也是需要引入jquery的js哟,今天要解决是多选框,所以嘛multiple-select.js这个也是非常重要的,资源获取地址:
select多选下拉框js实现下载
2、jsp详细页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="${path }/myjs/jquery.min.js"></script>
<script type="text/javascript" src="${path }/myjs/bootstrap.min.js"></script>
<script type="text/javascript" src="${path }/myjs/multiple-select.js"></script>
<link rel="stylesheet" href="${path }/mycss/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="${path }/mycss/multiple-select.css" type="text/css"/>
</head>
<body>
<form id="selectForm" action="${path}/selectmore/myselectmore.action" method="post" class="definewidth m20">
<table class="table table-bordered table-hover definewidth m10">
<tr>
<td width="10%" class="tableleft">用户名:</td>
<td><input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td width="10%" class="tableleft">密码:</td>
<td><input type="password" name="pwd" id="pwd"/>
</td>
</tr>
<tr>
<td width="10%" class="tableleft">多选值测试:</td>
<td>
<select id="example-getting-started" name="ttt" multiple="multiple">
<option value="1">南山区</option>
<option value="2">宝安区</option>
<option value="3">福田区</option>
<option value="4">盐田区</option>
<option value="5">罗湖区</option>
<option value="6">龙岗区</option>
</select>
<input type="hidden" name="morezeng" id="morezeng"/>
</td>
</tr>
<tr>
<td width="10%" class="tableleft">备注:</td>
<td>
<textarea rows="5" cols="50" id="remark" name="remark"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<!-- <button type="submit" class="btn btn-primary" type="button">保存</button> -->
<input type="reset" class="btn btn-primary" value="重置"/>
<input type="button" value="确认提交" class="btn btn-success" onclick="getConfirm();"/>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example-getting-started').multipleSelect({
width: 260,
multipleWidth: 55,
selectAll:false
});
});
function getConfirm()
{
debugger;
alert($('#example-getting-started').multipleSelect('getSelects','value'));
var selectValue = $('#example-getting-started').multipleSelect('getSelects','value');
console.log(selectValue);
$("#morezeng").val(selectValue);
$("#selectForm").submit();
}
</script>
</html>
上面的内容是自己做测试用的,
当页面首次加载的时候会执行这个方法:
$(document).ready(function() {
$('#example-getting-started').multipleSelect({
width: 260,
multipleWidth: 55,
selectAll:false
});
});
相关内容填写完毕之后,提交表单会执行js中的getConfirm()方法:
function getConfirm()
{
debugger;
alert($('#example-getting-started').multipleSelect('getSelects','value'));
var selectValue = $('#example-getting-started').multipleSelect('getSelects','value');
console.log(selectValue);
$("#morezeng").val(selectValue);
$("#selectForm").submit();
}
注意—执行这段代码:
$(‘#example-getting-started’).multipleSelect(‘getSelects’,’value’);
返回值是一个字符串数组。
getConfirm()方法是这样的,取得
<input type="hidden" name="morezeng" id="morezeng"/>
隐藏域中,
再提交到后台中去
3、后台中可以有很多取值的方法,这里介绍两种,一种直接使用request对象拿,另一种是使用struts2拿值。
3.1 request方式拿:
request对象提供以下几种,具体使用详情,请自行百度,
request.getParameter(arg0);
request.getParameterMap();
request.getParameterNames();
request.getParameterValues(arg0);
在这里我们通过request.getParameter(arg0);取得前台表单当中的各个值,arg0指的就是前台
$('#example-getting-started').multipleSelect('getSelects','value');
[‘1’,’2’,’3’]
把它的值放到一个隐藏域中,
<input type="hidden" name="morezeng" id="morezeng"/>
再通过这个隐藏域去拿值
注意,在这里隐藏域里的实际上是字符串数组–>[‘1’,’2’,’3’],但是通过request.getParameter(morezeng);拿到之后,request对象会把字符串数组转换成字符串“1,2,3”,我这里想说的是request对象已经为我们做了一部分工作了,非常棒哟!!!
3.2 struts2方式拿:
通过这种方式拿值的话,其实是struts2已经为我们做了一些事情了,这里,你可以在Action层里定义属性值,并且提供get set方法,这样页面的值就会由struts2设置进这些属性里面,当然需要注意的是页面的那些名字一定要和定义的属性一样哟 :
private String username;
private String pwd;
private String ttt;
private String morezeng;
private String remark;
其实这里有一个疑问,就是这次如果直接使用
1)
public class User implements Serializable{
private String username;
private String pwd;
private String ttt;
private String morezeng;
private String remark;
2)
public class SelectAction extends ActionSupport {
private User user;
这样的话就可以通过user拿到前台的那些值了哟,不过呢,前台写法也是有一点变化呢,应该是通过对象.属性这样方式来拿值呢,这样做,struts2才会通过user对象的set,get方法把值给设置进去呢哟!
<tr>
<td width="10%" class="tableleft">用户名:</td>
<td><input type="text" name="user.username" id="username"/>
</td>
</tr>
<tr>
<td width="10%" class="tableleft">密码:</td>
<td><input type="password" name="user.pwd" id="pwd"/>
</td>
</tr>
<tr>
<td width="10%" class="tableleft">多选值测试:</td>
<td>
<select id="example-getting-started" name="user.ttt" multiple="multiple">
看到没,它的名字写法是不一样了哟是:name=”user.username” 这样的形式的哟