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

实现的功能：

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

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

超文本标记语言部分代码如下：

div id=' 0 ' class=' row ' DD select id=' condition ' class=' span 2 ' style=' width :110 px；'选项值='和'与/option选项值='或'或/option选项值='不是'非/option/select/DD DD select id=' attr list ' class=' span 2 ' style=' width :110 px；'s 3360迭代器值='equipAttrs' id='attrs '选项值=' s :属性值=' # attrs[2]'/' s 3360属性值=' # attrs[1]'//选项s/3360迭代器/select /dd dd输入id='rangestart '类型=' text ' class=' span 2 search-query '/DD DD div id=' range end '-输入类型=' text ' class=' span 2搜索-查询'/div/DD div id='时间范围搜索/button/DD DD a id=' MultiSelect ' href=' # '添加条件/a/DD/div/div id=' lastrow '/div JQuery代码：

脚本类型=' text/JAVAScript ' src=' js/jquery-1。7 .2 .量滴js /脚本脚本类型='text/javascript' //用于动态修改新生成的节点id，便于定位子节点，为其添加事件var conditionCount=1；$(文档)。ready(function(){ $('#rangeend ')).hide()；$('#timerange ').hide()；$(“# condition”).hide()；//为初始节点添加事件选择单击("0");//日期选择控件参数设置$('#[id*=datetimepicker]').datetime picker({ format : ' yyyy-mm-DD '，todayBtn: true，start view :4，minView:2，maxView:4，start view :4，todayHighlight: true，initialDate: new Date()，autoclose: true，})；//为"添加条件"添加事件$(' #多选')。click(function(event){ var $ next row=$(' # 0 ')).clone()；//克隆初始节点$nextrow.attr('id '，conditionCount)；//修改复制的节点id，用于定位子节点$('#lastrow ').前($下一行)；$("# "条件计数"选择[id='条件']).show()；$(“#”conditionCount”输入[id=“范围起点”]').show()；$(' # ' conditionCount ' div[id=' range end ']').hide()；$(' # ' conditionCount ' div[id='时间范围']').hide()；$(' # ' conditionCount ' div[id=' click group ']').hide()；var $ t1=$(' # ' conditionCount ' div[id='时间范围']').儿童();var at=$ t1。attr(' id ')；$t1.attr('id '，在' ' conditionCount)；$ t1=$ t1。next()；var at1=$ t1。attr(' id ')；$t1.attr('id '，在1 ' ' conditionCount)；//为新插入的节点添加事件选择点击（条件计数);条件计数；$('#[id*=datetimepicker]').datetime picker({ format : ' yyyy-mm-DD '，todayBtn: true，start view :4，minView:2，maxView:4，start view :4，todayHighlight: true，initialDate: new Date()，autoclose: true，})；});});功能选择点击（标志){ /*三个对象如果放在这里定义的话会出错，每个选择事件都会控制最下面一行的文本框的显示，如果在下面三个事件中分别添加这三行，则事件触发正常$ start=$(' div[id=' flag ']ddin put[id=' range start ']')；$ end=$(' div[id=' flag ']dddiv[id=' range end ']')；$ time=$(' div[id=' flag ']dddiv[id='时间范围']')；*/$('# '标志DD select[id=' attr list ']选项[值*='日期']').click(function(){ $ start=$(' div[id=' flag ']ddin put[id=' range start ']')；$ end=$(' div[id=' flag ']dddiv[id=' range end ']')；$ time=$(' div[id=' flag ']dddiv[id='时间范围']')；$开始。hide()；$ end。hide()；时间。show()；});$("#"标志DD select[id=' attr list ']选项[值*='字符串']').click(function(){ $ start=$(' div[id=' flag ']ddin put[id=' range start ']')；$ end=$(' div[id=' flag ']dddiv[id=' range end ']')；$ time=$(' div[id=' flag ']dddiv[id='时间范围']')；$开始。show()；$ end。hide()；时间。hide()；});$("#"标志DD select[id=' attr list ']选项[value*='Float']').click(function(){ $ start=$(' div[id=' flag ']ddin put[id=' range start ']')；$ end=$(' div[id=' flag ']dddiv[id=' range end ']')；$ time=$(' div[id=' flag ']dddiv[id='时间范围']')；$开始。show()；$ end。show()；时间。hide()；});}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。