模拟select

<style>
    #bindBlur{ position: relative; height: 30px; width: 200px; margin: 20px 0;}
    #bindBlur span{display: inline-block; width: 200px; border: 1px solid #e5e5e5; height: 30px; line-height: 30px; background: #f7f7f7; }
    #bindBlur ul{display:none; position: absolute; top: 30px; left: 0; border: 1px solid #e5e5e5; width:100%; line-height:30px; }
</style>
<div id="bindBlur">
    <span>显示内容</span>
    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function() {
        var bindBlur = $("#bindBlur"),
            span = bindBlur.find("span"),
            ul = bindBlur.find("ul"),
            list = ul.children("li");
        span.bind("trigger.blur", function() {
            ul.hide();
        })
        span.click(function() {
            ul.show();
        })
        list.each(function() {
            var self = $(this);
            self.click(function() {
                var text = self.html();
                span.html(text);
            })
        })
        $("body").click(function(e) {
            if(e.target == span[0]) {
                return;
            }
            span.trigger("trigger.blur");
        })
    })
</script>