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運行界面：