jQuery实现高级检索功能

2020-05-24 21:29:18易采站长站整理

$( "#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>