初學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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
