DDR爱好者之家 Design By 杰米
初学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="/UploadFiles/2021-04-02/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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月26日
2024年04月26日
- 群星《发烧混声金唱盘》3CD[MP3][481M]
- DominikWagner-DoubleBassRhapsody(2023)[24-48]FLAC
- 和平之月系列PMR-0048贾鹏芳《浪漫Roman》[WAV+CUE]
- 和平之月系列PMR-0063贾鹏芳二胡《月光Moonlight》[WAV+CUE]
- 黄乙玲.1992-悲恋梦【歌林】【WAV+CUE】
- 许巍.2001-我只有两天精丫红星生产社】【WAV+CUE】
- 王芷蕾.2001-盛开精选2辑【华纳】【WAV+CUE】
- 群星.2003-LOVE情歌集【正东】【WAV+CUE】
- 张其萍《美丽中国梦》[WAV+CUE]
- 群星《嗨麦顶级中文舞曲·金牌舞曲精逊2CD[WAV分轨]
- 群星《发烧女生 DSD》[WAV+CUE][625M]
- 张学友《私人珍藏(黑胶CD)》2CD[WAV+CUE][1.2G]
- 刘紫玲《紫音幽韵(DSD)》[WAV+CUE][441M]
- 刘珺儿.2004-靓人靓歌5CD【音乐谷】【WAV+CUE】
- 康乔.1991-精丫丽风】【WAV+CUE】