在做查询时,一般我们都是首先选择查询项,如姓名,然后查询值,如“周”进行模糊查询,则所有名字中含有“周”的记录将被查出,如“马周”、“周向宁”等。如果查询项是年份,部门等有固定值的情况呢,要做添加的话,毋庸考虑,是用下拉菜单。如果是查询呢,有的简单的系统可能会用直接令用户输入的方法,这种方法虽然简单易行,但是很不友好,用户会觉得不舒服。
比较友好的界面设计方法应该是当查询项是姓名,名称及类似查询项时,使用文本框输入;如果查询项是年份时则使用下拉菜单。另外还有一个广泛应用于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>