自定义jQuery选择框

Customizing jQuery selectbox

本文关键字：选择 jQuery 自定义      更新时间：2023-09-26

我可以自定义这个插件吗？这样，在单击文档中除了selectbox之外的任何其他位置时，它都会关闭吗？我试图为body标签添加点击事件，但似乎不起作用。。

html

<select>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

css

.selectbox {
    width: 100px;
    border: 1px solid #000;
    padding: 2px 5px;
}
.list {
    background-color: #eee;
    border: 1px #ddd solid;
    padding: 0;
    position: absolute;
    list-style: none;
    width: 100%;
}
.list li:hover {
    color: #fff;
    background-color: #00f;
}

js

! function(t) {
return t.fn.selectbox = function(e) {
    var i;
    return i = t.extend({
        customList: !1
    }, e), this.each(function() {
        var e, n, s, c;
        return s = t(this).css({
            opacity: 0,
            position: "absolute",
            "z-index": 2,
            top: 0,
            width: "100%",
            height: "100%"
        }), i.customList && (n = s.children()), c = s.wrap("<div class='selectbox'></div>").parent().css({
            position: "relative"
        }), c.append("<span class='value'>" + s.val() + "</span>"), i.customList && (s.hide(), e = c.append("<ul class='list'></ul>").find("ul"), n.each(function() {
            return e.append("<li>" + this.text + "</li>")
        }), e.hide()), s.on("change", function() {
            return c.children(".value").text(t(this).val()), !1
        }), i.customList && (c.click(function() {
            return e.toggle(), !1
        }), e.children().click(function() {
            return e.toggle(), s.val(n.eq(e.children().index(this)).attr("value")).trigger("change"), !1
        })), t(this)
    })
}, !1
}(jQuery);

和这个代码挂钩插件

$('select').selectbox({customList: true});

这是JsFiddle DEMO

您可以隐藏这样的选项，绑定点击文档并检查选择框是否被点击，然后隐藏。

$(document).on('click',function(e){
    if(!$(e.target).is('select')){
        $('.selectbox ul').hide();
    }
});

DEMO

您可以在单击时监听document，只需隐藏.selectbox ul标记。由于<select>会自然地吃掉点击事件以阻止其冒泡到文档中，因此您不必担心检查事件的来源——您知道它不是来自选择框。

通常情况下，您应该非常谨慎地将事件处理程序绑定到文档，但由于这不应该被调用太频繁（点击）是一个相对罕见的事件），因此您应该没事。

这应该有效：

(function($) {
    $(document).on('click', function(e) {
        $('.selectbox').find('ul').hide();
    });
})(jQuery);

下面是一个示例jsFiddle

相关文章：