jquery实现多条件筛选特效代码分享

本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：
jquery实现的多条件搜索表单带日期选择表格表单效果源码，是一段实现了多个条件筛选搜索的特效代码，多条件拥有时间、地点、酒店位置及酒店名称等选项，同时在时间的输入表格中拥有时间选择功能，是一款非常实用的特效代码，值得大家学习。
运行效果图： -------------------查看效果下载源码-------------------

查看

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现多条件筛选特效代码如下

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<title>jquery多条件搜索表单带日期选择表格表单代码</title>

<link rel="stylesheet" type="text/css" href="style/list.css"/>

<link rel="stylesheet" type="text/css" href="style/manhuaDate.1.0.css"/>

<script type="text/javascript" src="JS/jquery-1.5.1.js"></script>

<script type="text/javascript" src="JS/datejs.js"></script>

<script type="text/javascript" src="JS/ui.tab.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var tab = new $.fn.tab({

tabList:"#demo1 .ui-tab-container .ui-tab-list li",

contentList:"#demo1 .ui-tab-container .ui-tab-content"

});

var tab = new $.fn.tab({

tabList:"#demo1 .ui-tab-container .ui-tab-list2 li",

contentList:"#demo1 .ui-tab-container .ui-tab-content2"

});

</script>

<script type="text/javascript">

$(function (){

$("input.mh_date").datejs({

Event : "click",//可选

Left : 0,//弹出时间停靠的左边位置

Top : -16,//弹出时间停靠的顶部边位置

fuhao : "-",//日期连接符默认为-

isTime : false,//是否开启时间值默认为false

beginY : 2010,//年份的开始默认为1949

endY :2015//年份的结束默认为2049

});

</script>

<script type="text/javascript">

$(document).ready(function(e) {

$("#selectList").find(".more").toggle(function(){

$(this).addClass("more_bg");

$(".more-none").show()

},function(){

$(this).removeClass("more_bg");

$(".more-none").hide()

});

</script>

<script type="text/javascript">

$(document).ready(function(){

var taboy_box=$(".lefttable-list");

taboy_box.children("tbody").find("tr:gt(2)").hide();

$(".leftbox-morea").toggle(function(){

$(this).parent().prev().find("tr").show();

$(this).addClass("more-i")

},function(){

$(this).removeClass("more-i");

$(this).parent().prev().children("tbody").find("tr:gt(2)").hide();

}

);

});

</script>

</head>

<body>

<br>

<div class="w1200">

<div class="list-screen">

<div class="screen-top" style="position:relative;"><span>目的地<input id="txtadress" type="text"/></span><span>入住<input type="text" class="mh_date" readonly="true" /></span><span>退房<input type="text" class="mh_date" readonly="true" /></span><span>酒店位置<input type="text" class="ju-adress" /></span><span>酒店名称<input type="text" class="ju-name" /></span><a href="#" id="submit-btn"/>搜索</a></div>

<div style="padding:10px 30px 10px 10px;"><div class="screen-address">

<div class="list-tab">

<div id="demo1" class="clearfix">

<div class="jiud-name">酒店位置</div>

<div class="ui-tab-container">

<ul class="clearfix ui-tab-list">

<li class="ui-tab-active">景点</li>

<li>交通枢纽</li>

<li>地铁周边</li>

<li>行政区</li>

</ul>

<div class="ui-tab-bd">

<div class="ui-tab-content clearfix">

<ul class="clearfix ui-tab-list2">

<li class="ui-tab-active">景点</li>

<li>交通枢纽</li>

</ul>

<div class="ui-tab-bd">

<div class="ui-tab-content2 clearfix"><p>

<label>

<input name="tabrad1" type="radio" value="" />

琶洲展馆</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

淘金/环市东 </label>

</p></div>

<div class="ui-tab-content2 clearfix" style="display:none">22222</div>

</div>

<div class="ui-tab-content clearfix" style="display:none">

<p>

<label>

<input name="tabrad1" type="radio" value="" />

琶洲展馆</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

淘金/环市东 </label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

广州东站/天河北</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

北京路/海珠广场</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

珠江新城/跑马场 </label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

长隆景区/广州南站</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

沙面/上下九步行</label>

</p>

</div>

<div class="ui-tab-content clearfix" style="display:none">

<p>

<label>

<input name="tabrad1" type="radio" value="" />

琶洲展馆</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

淘金/环市东 </label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

广州东站/天河北</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

北京路/海珠广场</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

珠江新城/跑马场 </label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

长隆景区/广州南站</label>

</p>

<p>

<label>

<input name="tabrad1" type="radio" value="" />

沙面/上下九步行</label>

</p>

</div>

<div class="ui-tab-content clearfix" style="display:none">

<p>

<input name="tabrad1" type="radio" value="" />

琶洲展馆</p>

<p>

<input name="tabrad1" type="radio" value="" />

淘金/环市东 </p>

<p>

<input name="tabrad1" type="radio" value="" />

广州东站/天河北</p>

<p>

<input name="tabrad1" type="radio" value="" />

北京路/海珠广场</p>

<p>

<input name="tabrad1" type="radio" value="" />

珠江新城/跑马场 </p>

<p>

<input name="tabrad1" type="radio" value="" />

长隆景区/广州南站</p>

<p>

<input name="tabrad1" type="radio" value="" />

沙面/上下九步行</p>

</div>

<div class="screen-term">

<div class="selectNumberScreen">

<div id="selectList" class="screenBox screenBackground">

<dl class="listIndex" attr="价格范围">

<dt>酒店价格</dt>

<dd>

<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>

<label>

<input name="radio2" type="radio" value="" />

<a href="javascript:;" values2="99" values1="1" attrval="1-99">100元以下</a></label>

<label>

<input name="radio2" type="radio" value="" />

<a href="javascript:;" values2="300" values1="100" attrval="100-300">100-300元 </a></label>

<label>

<input name="radio2" type="radio" value="" />

<a href="javascript:;" values2="600" values1="300" attrval="300-600">300-600元</a></label>

<label>

<input name="radio2" type="radio" value="" />

<a href="javascript:;" values2="1500" values1="600" attrval="5000以上">600-1500元</a></label>

<div class="custom"><span>自定义</span>

<input name="" type="text" id="custext1"/>

-

<input name="" type="text" id="custext2"/>

<input name="" type="button" id="cusbtn"/>

</div>

</dd>

</dl>

<dl class=" listIndex" attr="terminal_os_s">

<dt>酒店星级</dt>

<dd>

<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a> </label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="android"> 五星/豪华</a> </label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="symbian">四星/高档</a></label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="百度易平台">三星/舒适</a></label>

</dd>

</dl>

<dl class="listIndex" attr="terminal_brand_s">

<dt>主题风格</dt>

<dd data-more=true>

<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="小米">客栈</a></label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="华为">精品酒店</a> </label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="lenovo">情侣酒店</a> </label>

<label>

<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>

<a href="javascript:;" values2="" values1="" attrval="zte中兴">园林庭院</a></label>

<span class="more"><em class="open"></em>更多</span>

</dd>

</dl>

<dl class="listIndex more-none" attr="terminal_brand_s" style="display:none;border:none">

<dt style='visibility:hidden'>主题风格</dt>

<dd >

<label style='visibility:hidden'><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>

<form action="" method="get">

<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店2</a></label>

<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店3</a> </label>

<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店4</a> </label>

</form>

</dl>

</div>

<div class="hasBeenSelected clearfix"><span id="time-num"><font>208</font>家酒店</span>

<div style="float:right;" class="eliminateCriteria">【清空全部】 </div>

<dl>

<dt>已选条件：</dt>

<dd style="DISPLAY: none" class=clearDd>

<div class=clearList></div>

</dl>

</div>

<script type="text/javascript" src="JS/shaixuan.js"></script>

</div>

</body>

</html>

以上就是为大家分享的jquery实现多条件筛选特效代码，希望大家可以喜欢。

jquery实现多条件筛选特效代码分享的更多相关文章

20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
Jquery特效之=》仿京东多条件筛选特效
仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...
基于jQuery发展历程时间轴特效代码
分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="time ...
基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览源码下载实现的代码. html代 ...
9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片演示和下载地址 2.css3阴影动画效果演示和下载地址 3.拉窗帘特效图片演示和下载地址 4.css3文字特效动画演示和下载地址 5.css3时钟代码演示和下载 ...
jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...
jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
jQuery插件库代码分享 - 进阶者系列 - 学习者系列文章
这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家. 见下图结构. 对目录结构进行了分类.这里是插件列表. 这里总共收集了20来个插件.还有下面未进行划分的. 下面是DEMO ...

随机推荐

react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
css3特效详解
好吧,CSS3 3D transform变换,不过如此! 这篇文章发布于 2012年09月7日,星期五,01:05,归类于 css相关. 阅读 408042 次, 今日 34 次一.写在前面的秋裤 ...
echarts3 清空上一次加载的series数据
今天做图表的时候发现了一个问题,想和大家分享一下我有一个下拉选框,每次选中都切换不同的数据,数据是从后台查询获取的,但是如果后台返回了数据每次渲染都没有问题,如果后台没有返回数据,但是我在渲染图表的 ...
分享几个 git 的使用场景
你真的会使用 git 吗?你能回答下面几个问题吗? 有三个commit(顺序:CommitA.CommitB.CommitC),它们相互独立,没有依赖. 在不修改B.C的前提下,修改A,怎么操作? 合 ...
真机调试方法- IOS/Android移动设备
真机调试调试安卓方法一开启手机的USB调试安装运行项目使用chrome步骤如下图打开开发者工具打开设备管理选择设备进行debug 方法二: 直接在地址栏输入chrome://inspe ...
Tomcat集群搭建
关于如何搭建Tomcat集群网上还是能搜到很多相关的教程,这里结合我自己在实际应用中的操作做下备忘. 案例说明: 这里以在本机部署的2个tomcat来做集群.当然,tomcat集群可以是分布式的,而差 ...
一次C++调试记录
之前开发用Linux C比较多,C++中的STL 容器基本没有接触过.最近在学习C++,平时用到c++ 17中的部分新特性,下面就简单分享下自己C++的学习流程. 一.环境搭建本 ...
html之结构化标记
1.什么是结构化标记对布局使用的div 进行升级 , 根据页面的不同区域而提供的不同标签.作用与div几乎一致专门用于搭建网站结构而用 2.结构标记详解 1.<header>元素作用 ...
Andorid源码系列:View的onTouchEvent()与performClick(),performLongClick()调用时机解析
这是大土豆的第一篇博客,想着工作3年多了,在工作上从一名菜鸟逐渐成长为在项目中能干点事的人,自己对Android的见解也一步步加深,有必要写一些对Android代码和开发过程中的感悟,和广大朋友们分享 ...
理解梯度下降法(Gradient Decent)
1. 什么是梯度下降法? 梯度下降法(Gradient Decent)是一种常用的最优化方法,是求解无约束问题最古老也是最常用的方法之一.也被称之为最速下降法.梯度下降法在机器学习中十分常见,多用 ...

jquery实现多条件筛选特效代码分享

jquery实现多条件筛选特效代码分享的更多相关文章

随机推荐

热门专题