jsp中的对象的 onchange 事件

niaowxf 2008-10-15 09:21:36

做了N久的.Net 突然转过来做java 感觉好陌生了。好多都不知道了。
如题：第一个<select><option>顶级类别</option></select> 我需要在这个下拉列表中改变值的时候,让我的这个<select><option>下属类别</option></select>的值同步，我知道js可以写，但是不知道怎么写了，那位仁兄帮我写个例子好不？

...全文

466 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

youjianbo_han_87 2008-10-16

打赏
举报

直接用js，很方便，和做.net和java没什么关系

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
function changeCity()
{
var privence = document.getElementById('privence');
var privenceArr = privence.options;
var index = privence.selectedIndex;
var city = document.getElementById('city1');
if(index == 1)
{
city.options.length=0;
var optionLinyi = new Option('临沂','linyi');
var optionJinan = new Option('济南','jinan');
var optionRizhao = new Option('日照','rizhao');
city.options.add(optionLinyi);
city.options.add(optionJinan);
city.options.add(optionRizhao);
}else if(index == 2)
{
city.options.length=0;
var optionNanchang = new Option('南昌','nanchang');
var optionFuzhou = new Option('抚州','fuzhou');
var optionGanzhou = new Option('赣州','ganzhou');
city.options.add(optionNanchang);
city.options.add(optionFuzhou);
city.options.add(optionGanzhou);
}else
{
city.options.length=0;
}
}
</script>
<body>
<form>
<table>
<tr>
<td>
<select name="privence" style="width:100px;" id="privence" onChange="changeCity()">
<option>请选择省份</option>
<option value="shandong">山东</option>
<option value="jiangxi">江西</option>
</select>
</td>
<td>
<select name="city1" style="width:100px;" id="city1">

</select>
</td>
</tr>
</table>
</form>
</body>
</html>

dujun3245350 2008-10-16

打赏
举报

用ajax很快的

niaowxf 2008-10-16

打赏
举报

谢谢我把代码拿下去处理下

niaowxf 2008-10-16

打赏
举报

大家说的我都知道其实我是要联动我要从数据库读数据，结分了

feng8008 2008-10-15

打赏
举报

google 级联菜单

leiru 2008-10-15

打赏
举报

楼上写的很好啊。。
不过也可以在表中建立联动。。

ouyangxiaokang6 2008-10-15

打赏
举报

下面是个简单的例子，看能满足需求吗？
不行group可以加值



<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE 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=gb2312" />

<title>caidan</title>

</head>



<body>

<center><h1>caidan</h1></center>

<div align="center"><form name="isc">

              <table border="0" cellspacing="0" cellpadding="0">

                <tr align="center">

                  <td nowrap height="11">

                    顶级类别

                    <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">

                      <option selected>顶级类别1</option>

                      <option>顶级类别2</option>

                      <option>顶级类别3</option>

                      <option>顶级类别4</option>

                    </select>

                    下属类别  

                    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">

                      <option value=" " selected>下属类别1</option>

                      <option value=" ">下属类别2</option>

                      <option value=" ">下属类别3</option>

                      <option value=" ">下属类别4</option>

                    </select>

                   

              </table>

            </form>

          </div>

          <script language="JavaScript">

<!--

var groups=document.isc.example.options.length

var group=new Array(groups)

for (i=0; i<groups; i++)

group[i]=new Array()



group[0][0]=new Option("下属类别1");

group[1][0]=new Option("下属类别2");



group[2][0]=new Option("下属类别3");

group[3][0]=new Option("下属类别4");



var temp=document.isc.stage2





function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<group[x].length;i++){

temp.options[i]=new Option(group[x][i].text,group[x][i].value)

}

temp.options[0].selected=true

redirect1(0)

}



 



var secondGroups=document.isc.stage2.options.length

var secondGroup=new Array(groups)

for (i=0; i<groups; i++)  {

secondGroup[i]=new Array(group[i].length)

for (j=0; j<group[i].length; j++)  {

secondGroup[i][j]=new Array()  }}



var temp1=document.isc.stage3

function redirect1(y){

for (m=temp1.options.length-1;m>0;m--)

temp1.options[m]=null

for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){

temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)

}

temp1.options[0].selected=true

}

</script>

</body>

</html>

自己收集的jsp分页代码。对于北大青鸟Y2的学员可能有用吧。自己也在做这个项目。这里有增、删、该、查加分页。有上一页、下一页、首页、尾页、第几页、还有带数字和点的分页。可以说是非常好的分页代码。想要的朋友自己处下载 <%@ page contentType="text/html; charset=GB2312" language="java" import="java.sql.*" errorPage="" %> <%@ page import="java.io.*" %> <%@ page import="java.util.*" %> <% java.sql.Connection sqlCon; //数据库连接对象 java.sql.Statement sqlStmt; //SQL语句对象 ResultSet sqlRst=null; //java.sql.ResultSet sqlRst; //结果集对象 java.lang.String strCon; //数据库连接字符串 java.lang.String strSQL; //SQL语句 int intPageSize; //一页显示的记录数 int intRowCount; //记录总数 int intPageCount; //总页数 int intPage; //待显示页码 java.lang.String strPage; int i; //设置一页显示的记录数 intPageSize = 2; //取得待显示页码 strPage = request.getParameter("page"); if(strPage==null){ //表明在QueryString中没有page这一个参数，此时显示第一页数据 intPage = 1; } else{ //将字符串转换成整型 intPage = java.lang.Integer.parseInt(strPage); if(intPage<1) intPage = 1; } %><% String DBUser="sa"; String DBPassword="88029712"; //String DBServer="127.0.0.1"zjprice; String DBUrl="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs"; //创建语句对象 //Class.forName("org.gjt.mm.mysql.Driver").newInstance(); Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver").newInstance(); sqlCon=java.sql.DriverManager.getConnection(DBUrl,DBUser,DBPassword); sqlStmt=sqlCon.createStatement(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY); //执行SQL语句并获取结果集 String sql=null; String search=""; String ToPage=request.getParameter("ToPage"); if(request.getParameter("search")!=null &&!request.getParameter("search").equals("")) {search=new String(request.getParameter("search").trim().getBytes("8859_1")); } sql="select top 50 au_id,au_lname from authors "; /*sql="select*from ta,tb where id like'%"+search+"%'"; sql=sql+"or title like'%"+search+"%'"; sql=sql+"or time like'%"+search+"%'"; sql=sql+"or con like'%"+search+"%'"; sql=sql+"order by id";*/ sqlRst=sqlStmt.executeQuery(sql); //获取记录总数 sqlRst.last(); intRowCount = sqlRst.getRow(); //记算总页数 intPageCount = (intRowCount+intPageSize-1) / intPageSize; //调整待显示的页码 if(intPage>intPageCount) intPage = intPageCount; %> test <% if(intPageCount>0) { //将记录指针定位到待显示页的第一条记录上 sqlRst.absolute((intPage-1) * intPageSize + 1); //显示数据 i = 0; while(i <% sqlRst.next(); i++; } } %>

标题id	内容表
<%=sqlRst.getString(1)%>	<%=sqlRst.getString(2)%>
共有<%= intRowCount %>条记录当前<%=intPage%>/<%=intPageCount%>页 <% if(intPageCount > 1){ %> <% if(intPage !=0){%> 首页 <%}if(intPage != 1){%>上一页 <%}if(intPage下一页<%}%> 尾页 <% } %>跳转到 <select name="page" onChange="javascript:this.form.submit();"> <% for(i=1;i<=intPageCount;i++){%> <% } %> select>页 <%int m,n,p; %> <%if (intPage>1){ if(intPage-2>0){ m=intPage-2;} else { m=1;} if(intPage+2 转到页码: [ <% for(p=m;p<=n;p++) { if (intPage==p){ %> <%=p %> <% } else{%> >[<%=p %>] <% } }%>]<%} %>

<% //关闭结果集 sqlRst.close(); //关闭SQL语句对象 sqlStmt.close(); //关闭数据库 sqlCon.close(); %>

index.jsp(级联的重点) <%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""%> <jsp:useBean id="connDB" class="com.core.ConnDB" scope="page"/> <% ResultSet rs_city = null; ResultSet rs_Town = null; ResultSet rs_province = null; String sql = ""; String sql_T = ""; int SelectID_C = 0; int SelectID_P=0; String strCityID1=request.getParameter("CityID"); String strSelectID_P=request.getParameter("ProvinceID"); if (strSelectID_P!=null &&!strSelectID_P.equals("")) { session.setAttribute("SelectID_P", strSelectID_P); } String sql_P = "SELECT * FROM tb_Area WHERE TypeID=1 or TypeID=4 or TypeID=5"; try { rs_province = connDB.executeQuery(sql_P); if (rs_province.next()) { if(session.getAttribute("SelectID_P")!=null){ SelectID_P= Integer.parseInt((String)session.getAttribute("SelectID_P")); }else{ SelectID_P=rs_province.getInt("ID"); } %> 级联菜单 <script language="javascript"> function ChangeItem_P(){ var ProvinceID=form1.Province.value; window.location.href="index.jsp?ProvinceID="+ProvinceID; //缺点:取父结点的值时要转发页面. } function ChangeItem_C(){ var CityID=form1.city.value; window.location.href="index.jsp?CityID="+CityID; }

省级名称：	<% sql = "select* from tb_area where TypeID=2 and father=" + SelectID_P + ""; sql_T = "select* from tb_area where TypeID=3 and father=" + SelectID_P + ""; rs_city = connDB.executeQuery(sql); rs_Town = connDB.executeQuery(sql_T); %> <select name="Province" onChange="ChangeItem_P()"> <% rs_province.first(); do { %> <% } while (rs_province.next()) ; %> select>
市/县名称：	<%if (rs_city.next()) { if (strCityID1==null) { SelectID_C=rs_city.getInt("ID"); }else{ SelectID_C = Integer.parseInt(request.getParameter("CityID")); } %> <select name="city" onChange="ChangeItem_C()"> <%rs_city.first(); do { %> <% } while (rs_city.next()); %> select> <%} else { %> <select name="city" onChange="ChangeItem_C()"> select> <% } %>
区/镇/乡名称：	<% if (SelectID_C != 0) { //选择了市县级名称 sql_T = "select* from tb_area where father=" + SelectID_C + ""; System.out.println("sql_T!=0:"+sql_T); rs_Town = connDB.executeQuery(sql_T); } %> <%if (rs_Town.next()) {%> <select name="town" id="select5"> <%rs_Town.first(); do { %> <% } while (rs_Town.next()); %> select> <%} else { %> <select name="town" id="select5"> select> <%} %>