初学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实现高级检索功能-创新互联
文章源于:https://www.cdcxhl.com/article26/ehocg.html
成都网站建设公司_创新互联,为您提供域名注册、网站制作、网站策划、小程序开发、电子商务、网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联