<div id="selected">
      <div class="select join_state">
	       <span>Changed other time</span>
	       <i class="downicon"><img src="/public/image/downicon.png" ></i>
       </div>
	<ul class="join_statelist" style="display: block;">
		<li value="1" onclick="select_location('1')">Changed other time</li>
		<li value="2" onclick="select_location('2')">Break the contract and can't participate</li>
	</ul>
	<input type="hidden" id="area" >
</div>

$(function() {
        $(".select").click(function() {           
            $(this).siblings('.join_statelist').show();
        })
        $(".join_statelist li").click(function() {
            $(this).parent().siblings('.select').children('span').html($(this).html());
            $(".join_statelist").hide();
        })
        $(document).bind("click", function(e) {
            var e = e || window.event; //事件对象，兼容IE
            var target = e.target || e.srcElement; //源对象，兼容火狐和IE
            while (target) {
                if (target.id && target.id == "selected") { //循环判断至根节点，防止点击的是#selected和它的子元素
                    return;
                }
                target = target.parentNode;
            }
            $(".join_statelist").hide(); //点击的不是#selected和它的子元素，隐藏下拉菜单
        })
    })