做条件查询时的小技巧

在做查询时，一般我们都是首先选择查询项，如姓名，然后查询值，如“周”进行模糊查询，则所有名字中含有“周”的记录将被查出，如“马周”、“周向宁”等。如果查询项是年份，部门等有固定值的情况呢，要做添加的话，毋庸考虑，是用下拉菜单。如果是查询呢，有的简单的系统可能会用直接令用户输入的方法，这种方法虽然简单易行，但是很不友好，用户会觉得不舒服。

比较友好的界面设计方法应该是当查询项是姓名，名称及类似查询项时，使用文本框输入；如果查询项是年份时则使用下拉菜单。另外还有一个广泛应用于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 ，如需转载请自行联系原作者