189 8069 5689
初学JQuery，写了一个高级检索的动态输入框，如图所示：
解放ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
实现的功能：
* 当选择属性下拉框中不同类型（字符串、数字、日期）的属性时，后面弹出不同数量的和不同格式的文本框（字符串弹出一个输入文本框，数字型的弹出两个输入文本框，日期型的弹出两个日期选择控件）；
* 单击“添加条件”链接后，下面会增加一行条件输入，可以选择逻辑（与、或、非）、属性。
html部分代码如下：
< div id= "0" class ="row" >
< dd >
< dd >< select id= "attrlist" class= "span2" style = 'width:110px;' >
< dd>
< dd> --< input type= "text" class = "span2 search-query" >
< dd> < input type= "text" id = "datetimepicker1"> --
< dd>
JQuery代码：
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" >
< 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();
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。