jsp实现标签选择器

⑴ jsp页面中select标签中怎么加checkbox，实现多选

JSP页面代码：

代码如下:

<table>
<tr>
<td width="400px" align="left">入学批次：<SELECT NAME="grade"
id="grade" onchange="refreshELevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业
<OPTION VALUE="0">
--请选择--
<c:forEach items="${gradeInfo}" var="gradeInfo">
<OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}
</c:forEach>
</SELECT></td>
<td width="400px" align="left">统考课程：<SELECT
NAME="uniExamCourseId" id="uniExamCourseId">
<OPTION VALUE="0">
--请选择--
<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">
<OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}
</c:forEach>
</SELECT></td>
</tr>
<tr>
<td colspan="2" id="refreshELevelAndSpecialAjax"> //设置ID，用于填充层次和专业的下拉框
<table>
<tr>
<td width="400" align="left">层 次：<SELECT
NAME="eLevelId" id="eLevelId"
onchange="refreshSpecialAjax();"> //选择层次后刷新专业
<OPTION VALUE="0">--请选择--</OPTION>
<c:forEach items="${ecationLevel}" var="ecationLevel">
<OPTION VALUE="${ecationLevel.id}">${ecationLevel.ecationLevelName}
</c:forEach>
</SELECT></td>
<td width="400" align="left" id="refreshSpecialAjax">专 业：<SELECT //设置ID，用于填充专业的下拉框
NAME="specialId" id="specialId">
<OPTION VALUE="0">--请选择--</OPTION>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.specialName}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>
</tr>
</table>

JS的代码如下：

代码如下:

//javaScript Document
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
function refreshELevelAndSpecialAjax() {
var grade = document.getElementById("grade").value;
refreshELevelAndSpecial(grade);
}
function refreshELevelAndSpecial(grade) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = ; //设置回调函数
xmlHttp.open("POST", "",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade);
}
//处理服务器返回的信息 更新层次专业下拉框
function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshELevelAndSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
function refreshSpecialAjax() {
var grade = document.getElementById("grade").value;
var eLevelId = document.getElementById("eLevelId").value;
refreshSpecial(grade, eLevelId);
}
function refreshSpecial(grade, eLevelId) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = refreshSpecialElement; //设置回调函数
xmlHttp.open("POST", "",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade + "&eLevelId=" + eLevelId);
}
//处理服务器返回的信息 更新专业下拉框
function refreshSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}

Controller代码：

代码如下:

@RequestMapping(value = "/")
public ModelAndView (HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eLevelId=request.getParameter("eLevelId");
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eLevelId==null||eLevelId.equals("0")){
eLevelId="null";
}
ArrayList<UtilObject> eLevelList=uess.(gradeName);
ArrayList<UtilObject> specialIdList=uess.(gradeName, eLevelId);
mav.addObject("ecationLevel", eLevelList);
mav.addObject("specialList", specialIdList);
mav.setViewName("scoreManage/uniExamScore/eLevelAndSpecialAjax");
return mav;
}
@RequestMapping(value = "/", method = RequestMethod.POST)
public ModelAndView (HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eLevelId=request.getParameter("eLevelId");
System.out.println("grade:"+gradeName+" eLevelId:"+eLevelId);
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eLevelId==null||eLevelId.equals("0")){
eLevelId="null";
}
ArrayList<UtilObject> specialList=uess.(gradeName, eLevelId);
mav.addObject("specialList", specialList);
mav.setViewName("scoreManage/uniExamScore/specialAjax");
return mav;
}

后台代码没有给出来，但应该看得懂，就是获取后台数据传到eLevelAndSpecialAjax.jsp和specialAjax.jsp页面。这两个页面用于填充原页面，通过ID来填充相应区域，两个页面代码如下。
eLevelAndSpecialAjax.jsp辅助页面：

代码如下:

<td id="refreshELevelAndSpecialAjax"> //ID用于填充原页面
<table>
<tr>
<td width="400px" align="left">层 次：<select
id="eLevelId" name="eLevelId" onchange="refreshSpecialAjax();">
<option value="0">--请选择--</option>
<c:forEach items="${ecationLevel}" var="ecationLevel">
<option value="${ecationLevel.id}">${ecationLevel.name}</option>
</c:forEach>
<lect></td>
<td width="400px" align="left" id="refreshSpecialAjax">专 业：<SELECT //ID用于填充原页面
NAME="specialId" id="specialId">
<option value="0">--请选择--</option>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.name}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>

specialAjax.jsp辅助页面：

代码如下:

<td width="400" align="left" id="refreshSpecialAjax">专 业：<SELECT
NAME="specialId" id="specialId"> //ID用于填充原页面
<option value="0">--请选择--</option>
<c:forEach items="${specialList}" var="special">
<OPTION VALUE="${special.id}">${special.name}
</c:forEach>
</SELECT></td>

⑵ JSP中如何制作树形选择框

JSP中可以引用jquery控件来制作树形选择框。

其实就是联动下拉框，参考实现代码：

<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:13px}
.clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}
.clsTip{padding-top:5px;background-color:#eee;display:none}
.btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}
</style>
<body>
<script type="text/javascript">
$(function(){
function objInit(obj){
return $(obj).html('<option>请选择</option>');
}
var arrData={
厂商1:{品牌一:'型号1-1-1,型号1-1-2',
品牌二:'型号1-2-1,型号1-2-2'},
厂商2:{品牌一:'型号2-1-1,型号2-1-2',
品牌二:'型号2-2-1,型号2-2-2'},
厂商3:{品牌一:'型号3-1-1,型号3-1-2',
品牌二:'型号3-2-1,型号3-2-2'}
};
$.each(arrData,function(pF){
$('#selF').append('<option>'+pF+'</option>');
});
$('#selF').change(function(){
objInit('#selT');
objInit('#selC');
$.each(arrData,function(pF,pS){
if($('#selF option:selected').text()==pF){
$.each(pS,function(pT,pC){
$('#selT').append('<option>'+pT+'</option>');
});
$('#selT').change(function(){
objInit('#selC');
$.each(pS,function(pT,pC){
if($('#selT option:selected').text()==pT){
$.each(pC.split(","),function(){
$('#selC').append('<option>'+this+'</option>');
})
}
})

});
}
})
});
});
</script>

<div class="clsInit">

厂商：<select id="selF"><option>请选择</option></select>
品牌：<select id="selT"><option>请选择</option></select>
型号：<select id="selC"><option>请选择</option></select>
<input type="button" value="查询" id="Button1" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>

</body>
</html>

效果：

⑶ JSP列表中复选框批量选择功能实现

1、 实现的方法往往就是在每条记录前面加一个复选框，然后在列表下方放置一个“全选/
全不选”复选框。
2、 当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”
复选框后，列表中的所有复选框都取消选中。
3、 当列表中的复选框都取消选中后，“全选/全不选”复选框也要取消选中。当列表中的复
选框都选中后，“全选/全不选”复选框也要选中。
4、 得到所有选中记录的值。
这项功能其实也很简单，但往往用的时候都要重新再写一遍，于是把它总结为一个模块，记录下来，以便再用。

（1）首先是在每条记录前加入复选框，该处复选框中的值为“id|username”（示例），即选中此复选框会同时传两个值（传一个值的太简单，就不举例了），中间用|隔开，下面取值时会用到：
<input id="box" name="box" type="checkbox" value="id|username" onclick="checkonebox()"/>

（2）然后在下方加入“全选/全不选”复选框。
<input id="checkall" type="checkbox" value="" onclick="checkall()"/> 全选/全不选

(3)关键实现javascript
//点击"全选/全不选"复选框，如果选中，则选中全部复选框，否则取消选中全部复选框 function checkall() {
var ischecked = document.getElementById("checkall").checked;
if(ischecked) {
checkallbox();
}else {
discheckallbox();
}
}
//选中全部复选框
function checkallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = true;
}
}
//取消选中全部复选框
function discheckallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = false;
}

//点击某个复选框，如果所有复选框都选中，“全选/全不选”复选框也选中 //否则如果所有复选框都取消选中，“全选/全不选”复选框也取消选中 function checkonebox() {
if(isallchecked()) {
document.getElementById("checkall").checked = true;
}
if(isalldischecked()) {
document.getElementById("checkall").checked = false;
}
}

//是否全部选中
function isallchecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(!boxarray[i].checked) {
return false;
}
}
return true;
}
//是否全部没有选中
function isalldischecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
return false;
}
}
return true;
}
//得到选中项的值的集合，结果为“1|小明,2|小王,3|小李”的形式
function getallcheckedvalue() {
var boxvalues = "";
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
var boxvalue = boxarray[i].value;
if(boxvalues == "") {
boxvalues = boxvalue;
}else {
boxvalues = boxvalues + "," + boxvalue;

} } } return boxvalues;
//如果只需要得到其中选中项的id值的集合，方法如下，得到的值为（1,2,3,…） function getIds() {
var boxvalues = getallcheckedvalue();
var boxvaluesArray = boxvalues.split(",");
var ids = "";
for(var i = 0; i < boxvaluesArray.length; i++) {
var boxvalue = boxvaluesArray[i];
var boxvalueArray = boxvalue.split("|");
var id = boxvalueArray[0];
var username = boxvalueArray[1];
if(ids == "") {
ids = id;
}else {
ids = ids + "," + id;
}
}
return ids;
}

最后，总结步骤：每条记录前加复选框，加“全选/全不选”复选框，调用javascript

⑷ jsp页面中select标签中怎么加checkbox实现多选

使用JSP页面代码：

代码如下:

<table>

<tr>

<td width="400px" align="left">入学批次：<SELECT NAME="grade"

id="grade" onchange="refreshELevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业

<OPTION VALUE="0">

--请选择--

<c:forEach items="${gradeInfo}" var="gradeInfo">

<OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}

</c:forEach>

</SELECT></td>

<td width="400px" align="left">统考课程：<SELECT

NAME="uniExamCourseId" id="uniExamCourseId">

<OPTION VALUE="0">

--请选择--

<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">

<OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}

</c:forEach>

</SELECT></td>

</tr>

<tr>

<td colspan="2" id="refreshELevelAndSpecialAjax"> //设置ID，用于填充层次和专业的下拉框

<table>

<tr>

<td width="400" align="left">层 次：<SELECT

NAME="eLevelId" id="eLevelId"

onchange="refreshSpecialAjax();"> //选择层次后刷新专业

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${ecationLevel}" var="ecationLevel">

<OPTION VALUE="${ecationLevel.id}">${ecationLevel.ecationLevelName}

</c:forEach>

</SELECT></td>

<td width="400" align="left" id="refreshSpecialAjax">专 业：<SELECT //设置ID，用于填充专业的下拉框

NAME="specialId" id="specialId">

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${specialList}" var="special">

<OPTION VALUE="${special.id}">${special.specialName}

</c:forEach>

</SELECT></td>

</tr>

</table>

</td>

</tr>

</table>

⑸ jsp中男女选择，选中一个就不能选另外一个，怎么写的radio单选

1、新建一个html文件，命名为test.html。

⑹ 在JSP页面中 怎样实现点击按钮弹出选择框。能给出代码吗

jsp中点击按钮来弹出框，常见的有源window.open和window.showModalDialog()两种方法。
window.open基本语法：
window.open(pageURL,name,parameters)
其中：
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
示例：
<SCRIPT>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

window.showModalDialog使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

⑺ JSP中如何获取select标签选中的值

在jsp页面中通过form的得到的select标签的值，form提交给自身页面，然后通过request.getParameter（）方法取得值
测试代码如下(文件名为：testselect.jsp)：
<%@ page language=java import=java.util.* pageEncoding=GB18030%<%request.setCharacterEncoding(GB18030);//加上这一句解决的
String path = request.getContextPath();
String basePath = request.getScheme() + ://
+ request.getServerName() + : + request.getServerPort()
+ path + /;
//存放下来菜单对应值的数组
ArrayList nu = new ArrayList();
nu.add(一);
nu.add(二);
nu.add(三);%<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN<html<head<base href=<%=basePath%
<titleMy JSP 'testselect.jsp' starting page</title</head<body通过request.getParameter(number)方法取得下拉框选取的值
<form method=post action=testselect.jsp <!-- 提交给自身 --
<select name=number<%for (int i = 0; i < nu.size(); i++) {
out.print(<option + nu.get(i) + </option);}%</select
<input type=submit value=提交 name=submit</form</body<%//取得提交的数字，并显示
out.print(选的值是： + n);%</html运行界面：