* { margin:0; padding:0; list-style-type:none; } a,img { border:0; } body { font:12px/180% Arial,Helvetica,sans-serif, } /* select */ .select { padding:5px 10px; border:#ddd 1px solid; border-radius:4px; width:60%; margin:1% auto; font-size:12px } .select li { list-style:none; padding:10px 0 5px 100px } .select .select-list { border-bottom:#eee 1px dashed } .select dl { zoom:1; position:relative; line-height:24px; } .select dl:after { content:" "; display:block; clear:both; height:0; overflow:hidden } .select dt { width:100px; margin-bottom:5px; position:absolute; top:0; left:-100px; text-align:right; color:#666; height:24px; line-height:24px } .select dd { float:left; display:inline; margin:0 0 5px 5px; } .select a { display:inline-block; white-space:nowrap; height:24px; padding:0 10px; text-decoration:none; color:#039; border-radius:2px; } .select a:hover { color:#f60; background-color:#f3edc2 } .select .selected a { color:#fff; background-color:#f60 } .select-result dt { font-weight:bold } .select-no { color:#999 } .select .select-result a { padding-right:20px; background:#f60 url("close.gif") right 9px no-repeat } .select .select-result a:hover { background-position:right -15px }
三种条件可以任意组合,根据自己的需要改写js代码,使每次点击一个条件时都能实时的更新筛选的结果。