[snippet] Select Box

js

function:

selectBox:function(){
				 var li=$(this);
				 var selectbox=li.parent().parent();
				 $("li[data-value="+selectbox.attr("data-checked")+"]").show();
				 selectbox.attr("data-checked",li.attr("data-value"));
				 selectbox.children("div").text(li.text());
				 $(this).hide();
				 li.parent().slideUp("fast");
				 }

 

bind:

$(".selectbox>div").click(function(){$(this).siblings("ul").slideToggle("fast");});
			$(".selectbox").children("ul").mouseleave(function(){$(this).slideUp();})
			$(".selectbox>ul>li").click(sdk_effects.selectBox);

 

 html

<div id="num" class="selectbox" data-checked="">
  	<div>How many users does your app have?</div>
    <ul>
    	<li data-value="1">0-1000</li>
      <li data-value="2">1000-10000</li>
      <li data-value="3">10000-100000</li>
    </ul>
  </div>

 

css

.selectbox{
	width:348px;
	height:50px;
	border:1px solid #C9C9C9;
	text-align:left;
	font-size:15px;
	text-indent:25px;
	line-height:50px;
	position:relative;
	margin-bottom:20px;}
.selectbox>div{
	background:urldata:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABwSURBVChTY2gHgo6Ojv9E4AoGEACqX4pFEo6B8tPACkGgvr6eDSi4F10RCAMVbly1ahUzVCkEtLa2igIlb6MpPNnb28sJVYIK2traVICKXkEVP2lpaZGGSmEHQEVmQBOfA7EuVAg/APqBB8pEAgwMAB7xaYV5lkDCAAAAAElFTkSuQmCC) 315px center no-repeat;
	cursor:pointer;}
.selectbox ul{
	display:block;
	position:absolute;
	top:50px;
	left:-1px;
	list-style:none;
	cursor:pointer;
	width:100%;
	border:1px solid #C9C9C9;
	display:none;
	z-index:999;
	background:#FFF;}
.selectbox ul li{
	display:block;
	height:50px;}
.selectbox ul li:hover{
	background:#CD3333;
	color:#FFF;}