1.4 下拉列表
下拉列表是一种最节省空间的数据显示方式，正常状态下只能看到一个选项，单击控制按钮后，可以显示一定数量的选项，如果超出这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。下面通过具体实例介绍下拉列表在JSP中的应用。
实例015 将数据库中的数据输出到下拉列表中
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\015
实例说明
在远程教学系统中，通常将班级和学生信息放在两个不同的表中（这也是为了遵循数据规范化的原则），再通过一个班级编号相关联，这时，在添加学生信息页面中，就可以应用下拉列表将全部班级名称列出来供用户选择。运行本实例，单击“所属班级”下拉列表的控制按钮，将显示数据表中的全部班级名称，如图1.21所示。用户只需选择相应的班级即可。
图1.21 将数据库中的数据输出到下拉列表中
技术要点
实现将数据库中的数据输出到下拉列表中的功能，首先需要创建显示数据的结果集，再通过While语句将其添加到下拉列表的选项中。While语句的语法如下：
while condition{
}
参数说明：
● condition：数值或字符串表达式，其计算结果为true或false。如果condition为null，则condition被当作false。
注意：在应用While语句输出结果集中的数据时，必须加入rs.next()，否则将出现死循环，rs为结果集ResultSet的对象。
实现过程
（1）创建数据库操作类文件JDBConnection.Java，代码如下：
import java.sql.*;
public class JDBConnection {
private final String dbDriver =
"com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
private final String url =
"jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=db_database01";
private final String userName= "sa";
private final String password= "";
private Connection con = null;
public JDBConnection() {
try {
Class.forName(dbDriver).newInstance(); //加载数据库驱动
} catch (Exception ex) {
}
}
public boolean creatConnection(){ //创建数据库连接
try {
con = DriverManager.getConnection(url, userName, password);
con.setAutoCommit(true);
} catch (SQLException e) {
}
return true;
}
public ResultSet executeQuery(String sql){ //对数据库的查询操作
ResultSet rs;
try {
if (con == null) {
creatConnection();
}
Statement stmt = con.createStatement();
try {
rs = stmt.executeQuery(sql);
} catch (SQLException e) {
return null;
}
} catch (SQLException e) {
return null;
}
return rs;
}
public void closeConnection(){ //关闭数据库的操作
if (con != null) {
try {
con.close();
} catch (SQLException e) {
} finally {
con = null;
}
}
}
}
（2）通过JavaBean技术引用JDBConnection.java类中的方法，代码如下：
<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/>
（3）创建获取班级信息的结果集，代码如下：
<%
String sql="select * from tb_wyClass";
ResultSet rs=connection.executeQuery(sql);
%>
（4）将结果集中的数据显示到下拉列表中，关键代码如下：
<select name="user">
<%
try{
while(rs.next()){
%>
<option value="<%=rs.getString("name")%>"><%=rs.getString("name")%></option>
<%}}catch (Exception e){}%>
</select>
举一反三
根据本实例，读者可以：
通过下拉列表选择所属班级；
通过下拉列表选择员工所属部门；
通过下拉列表选择图书类别。
实例016 将数组中的数据添加到下拉列表中
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\016
实例说明
在开发动态网站时，可能需要将数组中的数据显示到下拉列表中供用户选择。本实例实现将数组中的数据在下拉列表中输出的功能。运行本实例，单击下拉列表的控制按钮，数组中的所有数据在下拉列表中输出，如图1.22所示。
图1.22 将数组中的数据添加到下拉列表中
技术要点
本实例主要应用关键字For将一个字符串按指定字符拆分成一个数组，再获取该数组的最大下标并应用For循环显示到下拉列表中。下面介绍For关键字。
基本语法：
for(int i=0;i<type.length;i++){
}
语法解释：
● int i：定义i对象的数据类型为基本整型。
● i<type.length：定义i对象的值小于数组的长度。
● i++：循环累加i的值。
实现过程
（1）定义一个字符串，代码如下：
String type[]={"JSP网站开发全书","案例开发集锦","计算机应用技术"};
（2）通过关键字For循环数组中的内容，再应用循环将获取的数组添加到下拉列表中，代码如下：
<select name="select">
<%for(int i=0;i<type.length;i++){%>
<option value="<%=type[i]%>"><%=type[i]%></option>
<%}%>
</select>
举一反三
根据本实例，读者可以：
在编写用户注册程序时，通过下拉列表选择所属省份；
在编写网络考试程序时，通过下拉菜单选择学生所学专业。
实例017 级联菜单
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\017
实例说明
在实际的Web开发时，经常会遇到多级相互关联的菜单。例如在网上客户管理系统中就涉及这样一个问题：客户的所属区域与业务员的工作区域是相关联的，一个业务员可以拥有与其工作区域同级或下级的所有客户，这就需要将客户的区域信息按省、市、区分级存储，也就是通过省级名称可以查询到其下属的全部市/县级名称，通过市/县级名称可以查询到其下属的全部区/镇/乡级名称。运行本实例，如图1.23所示，在省级名称下拉列表中选择“吉林”时，在市/县名称下拉列表中将列出属于吉林省的全部市/县，同时在区/镇/乡级名称下拉列表中，将显示属于其默认项的全部区/镇/乡级名称，然后进行市/县名称选择时，区/镇/乡名称下拉列表中的信息又随所选的市/县名称而改变。
图1.23 级联菜单
技术要点
从图1.23中可以看出，这里所说的级联菜单是由多个下拉列表组成的。为了实现级联菜单，需要在改变下拉列表的值时重新链接该页面，这时如不进行适当的处理，选择的下拉列表会恢复为默认值。解决该问题的方法是：在重新链接页面时，将选择的值传递到该页面，并根据传递的值重新设置下拉列表的默认选项。
说明：<option></option>标记的selected属性用于设置下拉列表的默认选项，如果想将某一个<option></option>标记设置为下拉列表的默认选项，只需在<option>标记中加入selected即可。
实现过程
（1）创建显示省级名称的记录集，在该记录集中包括自治区和直辖市，代码如下：
<jsp:useBean id="connDB" class="com.core.ConnDB" scope="page"/>
<%
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){ //判断当session的值不等于空时
SelectID_P=Integer.parseInt((String)session.getAttribute("SelectID_P")); //获取session的值
}else{
SelectID_P=rs_province.getInt("ID"); //否则输出查询结果集中的数据
}
//此处为页面中的主体内容，其关键代码将在下面步骤中给出
}
} catch (Exception e) {
System.out.println("查询省级名称时出错："+e.getMessage());
}
%>
说明：在tb_Area数据表中，TypeID字段的值为1表示省，为4表示直辖市，为5表示自治区。
（2）将查询到的省级名称显示到下拉列表中，同时设置当用户改变下拉列表中的值时，调用自定义的JavaScript函数，将选择的值传递给当前页面，并根据传递的值设置下拉列表的默认值，代码如下：
<%
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); //执行查询语句
%>
<div align="left">
<select name="Province" onChange="ChangeItem_P()">
<%
rs_province.first(); //获取查询结果集
do{ %>
<option value="<%=rs_province.getInt("ID")%>" <%if(rs_province.getInt("ID")==SelectID_P){out.print("selected");} %>><%=rs_
province.getString("Name")%> </option>
<%
}while(rs_province.next()); //在下拉列表中循环输出查询结果集中的数据
%>
</select>
</div>
（3）编写自定义JavaScript函数，实现重新链接该页面并将用户选择的省份作为参数传递的功能。代码如下：
<script language="javascript">
function ChangeItem_P(){
var ProvinceID=form1.Province.value;
window.location.href="index.jsp?ProvinceID="+ProvinceID;
}
（4）根据市县ID分别创建显示指定省份的下属市/县名称和区/镇/乡名称的结果集，代码如下：
<%
String strSelectID_P=request.getParameter("ProvinceID");
if (strSelectID_P!=null &&!strSelectID_P.equals("")) {
session.setAttribute("SelectID_P", strSelectID_P);
}
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); //执行查询语句
%>
（5）通过下拉列表显示省份名称，代码如下：
<select name="Province" onChange="ChangeItem_P()">
<%rs_province.first(); //应用do…while循环，在下拉列表中输出省份名称
do {%>
<option value="<%=rs_province.getInt("ID")%>" <%if(rs_province.getInt("ID")==SelectID_P){out.print("selected");}
%>><%=rs_province.getString("Name")%> </option>
<%} while (rs_province.next()) ;%>
</select>
（6）通过下拉列表显示选择省份名称的下属市/县名称，代码如下：
<%
if(rs_city.next()){ //如果城市的查询结果集为真
if(strCityID1==null){ //如果ID不等于空
SelectID_C=rs_city.getInt("ID"); //输出城市ID
}else{
SelectID_C=Integer.parseInt(request.getParameter("CityID")); //否则输出请求中提交的值
}
%>
<select name="city"onChange="ChangeItem_C()"> //在下拉列表中输出城市名称
<%
rs_city.first();
do{ //通过do…while循环输出
%>
<option value="<%=rs_city.getInt("ID")%>"
<%if(rs_city.getInt("ID")==SelectID_C){%>selected<%}%>>
<%=rs_ city.getString ("Name")%>
</option>
<% }while(rs_city.next());%>
</select>
<% } else { %>
<select name="city" onChange="ChangeItem_C()">
<option value="0">---</option>
</select>
<% } %>
（7）通过下拉列表显示选择省份及选择市/县或默认的下属市/县的区/镇/乡名称，代码如下：
<%
if(SelectID_C!=0){ //选择市县级名称
sql_T = "select* from tb_area where father=" + SelectID_C + "";
rs_Town=connDB.executeQuery(sql_T); //执行查询语句
}
%>
<%
if(rs_Town.next()){ //判断查询结果集是否为真
%>
<div align="left">
<select name="town" id="select5">
<%rs_Town.first(); //循环输出数据
do { %>
<option value="<%=rs_Town.getInt("ID")%>"><%=rs_Town.getString("Name")%> </option>
<%}while(rs_Town.next()); %>
</select>
</div>
<%}else{ %>
<div align="left">
<select name="town" id="select5">
<option value="0">---</option>
</select>
</div>
<%} %>
举一反三
根据本实例，读者可以：
在办公自动化系统中的部门设置中选择企业员工；
在企业进销存管理系统的商品销售模块中实现同名但不同规格商品的选择。
实例018 根据数据库中的数据定义下拉列表的默认值
本实例是一个提高数据库编程能力的程序
实例位置：光盘\mingrisoft\01\018
实例说明
在编写修改用户信息程序时，有时会涉及修改的信息需要从下拉列表中选择的问题，这时就需要将下拉列表的默认值设置为该用户的原有信息。运行本实例，如图1.24所示，在该页中将显示全部用户信息，单击对应用户信息后面的“修改”超级链接，即可进入图1.25所示的页面，其中“职业”下拉列表中的默认值是对应员工的职业名称。
图1.24 用户信息列表页面
图1.25 修改用户信息页面
技术要点
本实例主要应用If语句对从数据表中获取的值与下拉列表中各选项信息进行判断，如果条件相等，则在该数据项后面添加一个selected关键字。实现判断的关键代码如下：
<option value="<%=pro[i]%>"<%if(pro[i].equals(profession)){%>selected <%}%>><%=pro[i]%></option>
实现过程
（1）通过超级链接传递的ID值获取到相对应的用户，关键代码如下：
<a href="dealwith.jsp?id=<%=id%>">修改</a>
（2）根据要修改员工的ID号码，查询出该员工的职业名称，关键代码如下：
<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/>
<%
String sql="select * from tb_userInfo where id='"+request.getParameter("id")+"'";
String profession="";
ResultSet rs=connection.executeQuery(sql);
try{
while (rs.next()){
profession=rs.getString("profession");
}
}catch (Exception e){}
%>
（3）表单提交到处理页面后，根据ID的值筛选出相应的记录进行修改，关键代码如下：
<select name="profession">
<%for(int i=0;i<pro.length;i++){%>
<option value="<%=pro[i]%>"<%if(pro[i].equals(profession)){%>selected <%}%>><%=pro[i]%></option>
<%}%>
</select>
举一反三
根据本实例，读者可以：
在编写修改新闻程序时，通过下拉菜单重新选择该新闻所属类型；
在开发修改图书分类程序时，通过下拉菜单重新选择图书所属类型。
实例019 可以输入文字的下拉列表
这是一个提高分析能力的实例
实例位置：光盘\mingrisoft\01\019
实例说明
几乎每个网络程序员都知道，网页中下拉列表的选项是固定的，这样就存在一些弊端，当用户想选择的项目不在下拉列表的所列选项中时，用户该怎么办呢？如果能在下拉列表中输入文字，这个问题就不存在了。运行本实例，在“证件类别”下拉列表中，只包含“身份证、军官证、学生证”3个选项，当注册用户拥有的是这3个选项以外的证件（例如驾驶证）时，就可以在下拉列表中直接输入相关证件类型，如图1.26所示，这时单击“提交”按钮后，新输入的证件类别将同其他信息一起被提交。
图1.26 可以输入文字的下拉列表
技术要点
由于下拉列表的选项是固定的，因此要实现在下拉列表中输入文字，首先需要捕获用户的键盘事件，然后根据键盘输入的数据动态添加下拉列表的选项，同时还需要判断用户按下的是否为“退格”键和“空格”键，如果是“退格”键，则需要从已经添加的文字中删除一个文字，如果是“空格”键，则需要在已经添加的文字后面添加一个空格字符。
注意：删除输入选项中的文字时，如果删除到最后一个文字时，则将该选项一同删除，同时改变下拉列表的选中项。
实现过程
（1）在页面中添加证件类别下拉列表，其中包括“身份证、军官证、学生证”3个选项，代码如下：
<select id="CardType" class="textarea" onkeypress="trigger(3)" onkeyup="edit(3)" name="CardType">
<option value="身份证">身份证</option>
<option value="军官证">军官证</option>
<option value="学生证">学生证</option>
</select>
（2）编写键盘按下事件所执行的JavaScript自定义函数trigger(optNumber)，用于在下拉列表中添加新的选项，并将用户输入的选项信息添加到选项中，然后设置该选项为选中项，代码如下：
<script language="javascript">
function trigger(opt){
//opt表示现有可选项的数目
form1.CardType.options[opt]=new Option(form1.CardType.options[opt]?
form1.CardType.options[opt].innerText+String.fromCharCode(event.keyCode):
String.fromCharCode(event.keyCode))
form1.CardType.selectedIndex=opt; //设置下拉列表的选中项
}
</script>
（3）编写键盘按下事件所执行的JavaScript自定义函数edit (optNumber)，用于处理当用户按下退格键“BackSpace”时，将已经写到下拉列表中的文字全部删除，当用户按下空格键“Space”时，在下拉列表中添加一个空格，代码如下：
<script language="javascript">
function edit(opt){
//opt表示现有可选项的数目
if(form1.CardType.options[opt]){
if(event.keyCode==8){
var str=form1.CardType.options[opt].innerText;
var len=str.length; form1.CardType.options[opt].innerText=str.substring(0,len-1);
if(form1.CardType.options[opt].innerText==""){
form1.CardType.remove(opt);
form1.CardType.selectedIndex=1;
};
}
if(event.keyCode==32){
form1.CardType.options[opt].innerText+=" ";
}
}
}
</script>
（4）编写接收用户输入信息的JSP代码，获取“证件类型”下拉列表的值，代码如下：
<%=request.getParameter("CardType")%>
举一反三
根据本实例，读者可以：
开发电子商务网站中后台添加商品信息模块；
在网上图书超市后台管理中添加新的图书类别。
实例020 根据下拉列表的值显示不同控件
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\020
实例说明
在开发Web应用程序时，经常涉及多条件查询的问题。有时为了方便用户，需要根据用户选择的条件，设置不同的控件来收集查询关键字。运行本实例，在“条件”下拉列表中选择“特色名称”时，在下方将显示关键字文本字段，如图1.27所示；选择“所属名店”时，查询关键字将以下拉列表的形式给出，供用户选择，如图1.28所示。
图1.27 选择“特色名称”时
图1.28 选择“所属名店”时
技术要点
本实例主要应用JavaScript脚本控制下拉列表中的内容动态显示，根据下拉列表中值的不同，而显示不同的控件。
在JavaScript脚本中获得当前Form表单值的关键代码如下：
var name=form.name.value;
在下拉列表中，通过onChange事件来调用自定义函数。
实现过程
（1）控制下拉列表内容动态显示的JavaScript脚本程序的代码如下：
<script language="javascript" type="text/javascript">
function ChangeItem(){
var name=form.name.value;
window.location.href="index.jsp?name="+name;
}
</script>
（2）通过request取得对象name的值，并且进行判断，代码如下：
<%
String name="";
if(request.getParameter("name")!=null){
name=request.getParameter("name");
}
%>
<form name="form" method="post" action="">
<tr align="center">
<td width="70" height="30">条件：</td>
<td width="188"><div align="left">
<select name="name"style="width:100;border:1px solid;" onChange="ChangeItem()">
<option>请选择</option>
<option value="1" <%if(name.equals("1")){%>selected<%}%>>特殊名称</option>
<option value="2" <%if(name.equals("2")){%>selected<%}%>>所属名店</option>
</select>
</div></td>
</tr>
<%if(name.equals("1")){%>
<tr align="center">
<td height="30">关键字：</td>
<td><input type="text" name="point"></td>
</tr>
<%}if(name.equals("2")){%>
<tr align="center">
<td height="30">关键字：</td>
<td><select name="point "><option value="无">无</option></select></td>
</tr>
<%}%>
<tr>
<td height="30" colspan="2" align="center">
<input type="submit" name="Submit2" value="查询">
<input type="reset" name="Submit" value="重置">
</td>
</tr>
</form>
举一反三
根据本实例，读者可以：
编写智能搜索程序。
开发电子商务网站的商品信息查询模块；
开发房产资讯网站中的信息搜索模块。