模拟select

模拟select下拉框

当元素失去焦点时发生 blur 事件。这里在span上绑定trigger.blur模拟blur事件。

body加了一个click事件，点击非当前span区域触发span的trigger.blur事件来隐藏下拉ul层;

点击span区域 e.target和span[0] 返回[object HTMLSpanElement] return;保证鼠标点在span区域ul下拉层还在显示。

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