jQuery实现高级检索功能

初学jquery，写了一个高级检索的动态输入框，如图所示： 

实现的功能：

* 当选择属性下拉框中不同类型（字符串、数字、日期）的属性时，后面弹出不同数量的和不同格式的文本框（字符串弹出一个输入文本框，数字型的弹出两个输入文本框，日期型的弹出两个日期选择控件）；

* 单击“添加条件”链接后，下面会增加一行条件输入，可以选择逻辑（与、或、非）、属性。

html部分代码如下：

< div id= "0" class ="row" > 

  < dd >

   <select id = "condition" class= "span2" style = 'width:110px;' >         

    <option value= 'and' >与 </option >
    <option value = 'or'> 或</ option>
    <option value= 'not' >非 </option >        

   </select >

  </dd >      

  < dd >< select id= "attrlist" class= "span2" style = 'width:110px;' >
   <s:iterator value= "equipattrs" id ="attrs" >          
    <option value= '< s:property value= "#attrs[2]" />' ><s:property value= "#attrs[1]" /></option >

   </s:iterator >         

  </select ></dd >

  < dd> <input id = "rangestart" type= "text" class = "span2 search-query"></ dd>       
  < dd> <div id = "rangeend"> --< input type= "text" class = "span2 search-query" ></div ></dd >
  < dd> <div id = "timerange">< input type= "text" id = "datetimepicker1">        --
  <input type = "text" id= "datetimepicker2" >
  </div ></dd >
  <div id = "clickgroup">

   < dd> <button id = "searchbutton" type= "submit" class = "btn"> 搜索</ button></ dd>  
   < dd> <a id = "multiselect" href= "#"> 添加条件 </a ></dd >

  </div >      
</div >  
< div id= "lastrow" ></div >

jquery代码：

< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></ script >
< script type= "text/javascript" >
//用于动态修改新生成的节点id，便于定位子节点，为其添加事件
var conditioncount=1;

$(document).ready( function(){
  $( "#rangeend").hide();
  $( "#timerange").hide();
  $( "#condition").hide();
  //为初始节点添加事件
  selectclick( "0");
  //日期选择控件参数设置
  $( '#[id*=datetimepicker]').datetimepicker({
   format: 'yyyy-mm-dd',
   todaybtn: true,
   startview:4,
   minview:2,
   maxview:4,
   startview:4,
   todayhighlight: true,
   initialdate: new date(),
   autoclose: true,  
  }); 
  //为“添加条件”添加事件
  $( "#multiselect").click( function(event){
   var $nextrow=$( "#0").clone(); //克隆初始节点
   $nextrow.attr( "id",conditioncount); //修改复制的节点id，用于定位子节点
   $( "#lastrow").before($nextrow);
   $( "#"+conditioncount+ " select[id='condition']").show();
   $( "#"+conditioncount+ " input[id='rangestart']").show();
   $( "#"+conditioncount+ " div[id='rangeend']" ).hide();
   $( "#"+conditioncount+ " div[id='timerange']" ).hide();
   $( "#"+conditioncount+ " div[id='clickgroup']" ).hide();
   var $t1=$( "#"+conditioncount+ " div[id='timerange']").children();
   var at=$t1.attr( "id");
   $t1.attr( "id",at+ ""+conditioncount);
   $t1=$t1.next();
   var at1=$t1.attr( "id");
   $t1.attr( "id",at1+ ""+conditioncount);
   //为新插入的节点添加事件 
   selectclick(conditioncount);
   conditioncount++;

   $( '#[id*=datetimepicker]').datetimepicker({
    format: 'yyyy-mm-dd',
    todaybtn: true,
    startview:4,
    minview:2,
    maxview:4,
    startview:4,
    todayhighlight: true,
    initialdate: new date(),
    autoclose: true,  
   }); 

  });
});


  function selectclick(flag){
   /* 三个对象如果放在这里定义的话会出错，每个选择事件都会控制最下面一行的文本框的显示，如果在下面三个事件中分别添加这三行，则事件触发正常   
   $start=$("div[id="+flag+"]>dd>input[id='rangestart']");
   $end=$("div[id="+flag+"]>dd>div[id='rangeend']");
   $time=$("div[id="+flag+"]>dd>div[id='timerange']"); */
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='date']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.hide();
    $end.hide();
    $time.show();
   });
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='string']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.show();
    $end.hide();
    $time.hide();
   });
   $( "#"+flag+ ">dd>select[id='attrlist']>option[value*='float']" ).click( function(){
    $start=$( "div[id="+flag+ "]>dd>input[id='rangestart']" );
    $end=$( "div[id="+flag+ "]>dd>div[id='rangeend']" );
    $time=$( "div[id="+flag+ "]>dd>div[id='timerange']" );
    $start.show();
    $end.show();
    $time.hide();
   });
  }

</ script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。