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

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

Javashop商城系统，专业_省心

【点击进入】

多用户商城系统,分销系统,cms系统 高质量专业的商城系统服务提供商

查 看

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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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><!--日期控件，JS库版本不能过高否则tab会失效-->

<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>

       <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>

     </div>

    </div>

   </div>

  </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> 

  </div>

  </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>

</div>

</body>

</html>

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

时间： 2024-10-17 21:24:01

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

jquery插件jqzoom放大镜插件特效代码分享

原文:jquery插件jqzoom放大镜插件特效代码分享 源代码下载地址:http://www.zuidaima.com/share/1550463469554688.htm 放大镜插件效果是当前电子商务系统的一个不可缺的部分,值得学习哦 代码截图:

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

Jquery特效之=》仿京东多条件筛选特效

仿京东多条件筛选特效 品牌: 全部 惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕 戴尔 三星 索尼 东芝 Gateway 微星 海尔 清华同方 富士通 苹果(Apple) 神舟 方正 优雅 价格: 全部 1000-2999 3000-3499 3500-3999 4000-4499 4500-4999 5000-5999 6000-6999 7000-9999 10000以上 尺寸: 全部 8.9英寸及以下 11英寸 12英寸 13英寸 14英寸 15英寸

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

18款jquery抽屉式手风琴导航特效代码分享

jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 jQuery扁平风格的图标导航手风琴切换代码 jQuery左右滑动手风琴轮播切换特效 jQuery仿AnG无双科技滑动手风琴特效源码 jquery图片信息列表选项卡左右切换代码 jQuery hover水滴导航切换选项卡栏目代码 jquery手风琴菜单制作横向菜单切换手风琴效果代码 jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码 jQuery仿艺龙旅行网图片手风琴特效 jQuery C

自适应屏幕的jQuery响应式布局网站特效代码

jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery响应式布局_宽屏响应式焦点图片动画轮播代码 css3绘图制作css3响应式组织架构图形代码 jQuery css3图片翻转响应式布局翻转图片筛选器代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jQuery html5全屏响应式幻灯片制作触屏手机幻灯片代码 jQuery图片响应式布局点击弹出图片响应式幻灯片代码 jquery 3d响应式幻灯片

18款js和jquery文字特效代码分享

jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形球状的3D云标签动画效果 原生js tagscloud文字标签云仿快播文字标签云上下滚动出现 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery lettering书写中文彩色文字_html彩色文字特效 jquery 文字特效霓虹灯文字效果使用jQuery和CSS jquery文字动画插件制作文字flash动画滤镜效果切换特效

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

9种jQuery和css3图片动画特效代码演示

1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载地址 6.css3图片放大动画 演示和下载地址 7.jQuery滑块图片展开效果 演示和下载地址 8.css3文字阴影 演示和下载地址 9.jQuery 3d图片旋转特效 演示和下载地址