在做查询时，一般我们都是首先选择查询项，如姓名，然后查询值，如“周”进行模糊查询，则所有名字中含有“周”的记录将被查出，如“马周”、“周向宁”等。如果查询项是年份，部门等有固定值的情况呢，要做添加的话，毋庸考虑，是用下拉菜单。如果是查询呢，有的简单的系统可能会用直接令用户输入的方法，这种方法虽然简单易行，但是很不友好，用户会觉得不舒服。
比较友好的界面设计方法应该是当查询项是姓名，名称及类似查询项时，使用文本框输入；如果查询项是年份时则使用下拉菜单。另外还有一个广泛应用于ERP系统，OA系统，MIS系统等中的按照部门查询，这种情况下有可能是部门会动态增加或减少，那么查询项我们可以有两种设计方法，第一种，尽可能将以后会出现的所有不猛加入下拉菜单；第二种将部门记录从数据库中读出显示在下拉菜单中。
示例代码如下：
<
script
type
=
"text/javascript"
>
function
check()
{
var
msg = document.getElementById(
"searchitem1"
);
if
(
'depName'
.match(msg.value))
{
document.all(
'showName'
).style.display=
"none"
;
document.all(
'showDep'
).style.display=
"block"
;
}
else{
document.all(
'showName'
).style.display=
"block"
;
document.all(
'showDep'
).style.display=
"none"
;
}
}
<
form
name
=
"Form"
method
=
"post"
>
<
table
>
<
tr
>
<
td
width
=
"10%"
></
td
>
<
td
>
<
select
name
=
"query.searchitem1"
id
=
"searchitem1"
onclick
=
"check();"
>
<
option
value
=
"name"
>
姓名
</
option
>
<
option
value
=
"depName"
>
部门
</
option
>
</
select
>
</
td
>
<
td
>
<
div
id
=
"showName"
style
=
"display: block;"
>
<
input
type
=
"text"
name
=
"query.searchvalue2"
style
=
"width: 150px"
>
</
div
>
<
div
id
=
"showDep"
style
=
"display: none;"
>
按部门查询的第一种方法
<
select
name
=
"query.searchvalue1"
id
=
"searchvalue1"
style
=
"width: 150px"
>
<
option
value
=
"
办公室
"
>
办公室
</
option
>
<
option
value
=
"
市场部
"
>
市场部
</
option
>
</
select
>
按部门查询的第二种方法，
departmentlist
为符合查询要求的
department
列表
<%
<
select
name
=
"query.searchvalue2"
id
=
"searchvalue2"
style
=
"width: 150px"
>
<
c:forEach
var
=
"item"
items
=
"${departmentlist}">
<
option
value
=
"<c:out value='$item.deptName}'/>">
${item.deptName}
</
option
>
</
c:forEach
>
</
select
>
%>
</
div
>
</
td
>
<
td
>
<
input
type
=
"button"
name
=
"button"
value="
查
询
style
=
"cursor: hand;"
/>
</
td
>
</
tr
>
</
table
>
本文转自 gaochaojs 51CTO博客，原文链接：http://blog.51cto.com/jncumter/164343
，如需转载请自行联系原作者
