https://blog.csdn.net/muziruoyi/article/details/44494465

< 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 >
< 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>

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

< dd >

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

<optionvalue= 'and' >与 </option >

<optionvalue = 'or'> 或</ option>

<optionvalue= 'not' >非 </option >

</select >

</dd >

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

<s:iterator value= "equipAttrs" id ="attrs" >

<optionvalue= '< 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实现高级检索功能的更多相关文章

  1. 基于NEO4J的高级检索功能

    基于NEO4J的高级检索 一.需求 二.创建索引 1.索引自动更新配置 2.执行带有索引自动更新配置的过程 三.查询索引 1.LUCENE查询语法 2.实现高级检索的核心:LUCENE QUERY语句 ...

  2. SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能(maven)

    SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...

  3. 百度API的经历,怎样为多个点添加带检索功能的信息窗口

    不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!! 伸手党,请直接到页面底部获取完整代码! 最近做一个门店查询的内容展示,考虑到用户直观 ...

  4. Elasticsearch实现类Google高级检索

    文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247483914&idx=1&sn=436f814 ...

  5. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  7. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  8. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  9. 百度地图 Android SDK - 检索功能使用的简单演示样例

    百度地图 SDK 不仅为广大开发人员提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发人员提供了多种 LBS 检索的能力. 通过这些接口,开发人员能够轻松的訪问百度的 LBS 数据,丰富自己的移 ...

随机推荐

  1. Unity 4.x 资源加载

    using UnityEngine; using System.Collections; using System.IO; public class LoadResource : MonoBehavi ...

  2. Java-Java语言

    2017-10-03 21:25:38 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.J ...

  3. LeetCode--108--将有序数组转化为二叉搜索树

    问题描述: 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10 ...

  4. laravel时间判断

    $now = Carbon::now(); if ($now >= '2019-01-02') { }

  5. 『Sklearn』框架自带数据集接口

    自带数据集类型如下: # 自带小型数据集# sklearn.datasets.load_<name># 在线下载数据集# sklearn.datasets.fetch_<name&g ...

  6. hdu-1404-博弈+打表

    Digital Deletions Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. JavaScript In OA Framework

    原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...

  8. 使用a标签实现软件下载及下载量统计

    通常最简单的软件下载就是采用如下方式: <a id="welcomeMiddleBtn" href="${basePath}/files/client/instal ...

  9. Oracle 11g 在audit_file_dest目录下产生大量的aud文件

    一.adump目录数据暴增现象 发现某台数据库服务器的根目录的使用率在暴涨,发现Oracle数据库的adump目录,每秒生成一个dump文件.数据库并未开通审计外部记录.为什么adump目录会生成那么 ...

  10. linux fdisk 添加硬盘,分区,挂载,永久挂载

    具体步骤: 1.SSH登陆服务器: 2.列出所有硬盘: 命令:ll /dev/disk/by-path 我这里还有个sda 3.查看磁盘分区情况: 命令 :fdisk -l 最上面两部分表示我有两个物 ...