jq编写插件

html

<div id="addSelect">
    <i><em>作品类型</em></i>
</div>
<script type="text/javascript">
 // 下拉框引用
    $("#addSelect").mySelect({ "data": ["请选择作品类型", "文字作品", "视听作品", "美术作品", "摄影作品", "音乐作品"] });
//下拉框选中值
$("#addSelect").mySelect("getVal")
//下拉框清除验证
$("#addSelect").mySelect("clearVerificate");
</script>

js

//jq封装下拉列表
// 立刻执行函数
; (function ($) {
    function mySelectFn(elem, options) {
        //创建一些默认值，拓展任何被提供的选项
        this.defaults = { data: [], ele: elem };
        this.opts = $.extend({}, this.defaults, options);
        this.init()
    }
    mySelectFn.prototype = {
        init: function () {
            var dom = '<div class="mySelectBox" id="mySelectBox">'
                + '<div class="mySelect" id="selectedVal">' + this.opts.data[0] + '</div>'
                + '<ul class="myOptionsBox" id="myOptionsBox">';
            $.each(this.opts.data, function (i, item) {
                dom += '<li>' + item + '</li>';
            })
            dom += '</ul></div>'
                + '<span class="inputTips" style="display: none;">请选择作品类型！</span>';
            this.opts.ele.append(dom);
            // 打开或者关闭选项
            $("body").on("click", function (e) {
                if ($(e.target).hasClass("mySelect") == true) { //点击下拉框
                    $("#myOptionsBox").css("display") == "none" ? $("#myOptionsBox").show() : $("#myOptionsBox").hide();
                    return;
                }
                $("#myOptionsBox").hide();
            });
            // 下拉框选中
            $("#mySelectBox li").click(function (e) {
                $(this).addClass("selectAct").siblings().removeClass("selectAct");
                $("#selectedVal").text($(this).text());
            });
        },
        getVal: function () {//获取下拉框值
            return $("#selectedVal").text();
        },
        setVal: function (val) {//设置下拉框值
            $("#selectedVal").text(val);
            $("#myOptionsBox li").each(function (i, item) {
                if ($(item).text() == val) {
                    $(item).addClass("selectAct").siblings().removeClass("selectAct");
                }
            });
        },
        getVerificate: function () {
            $("#mySelectBox").siblings(".inputTips").show();
        },
        clearVerificate: function () {
            $("#mySelectBox").siblings(".inputTips").hide();
            this.setVal("请选择作品类型");
        }
    }
    $.fn.mySelect = function (options) {
        // 实现链式调用
        // return this.each(function () {
        // 缓存this对象
        var $this = $(this);
        var instance = $this.find("#mySelectBox").length > 0;
        // 判断实例是否存在，不存在则创建对象，并将该对象及配置项传入
        if (!instance) {
            instance = new mySelectFn($this, options);
        }
        // 在外部可以通过$(selection).mySelect("getVal")
        if ($.type(options) === "string") {
            if (options.indexOf("(") > -1 && options.indexOf(")") > -1) {
                return eval("mySelectFn.prototype." + options);
            }
            if (options.indexOf("(") == -1 && options.indexOf(")") == -1) {
                return mySelectFn["prototype"][options]();
            }

        }
        // });
    };
})(jQuery);

 css

.mySelectBox {
    width: 100%;
    line-height: 0.36rem;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    position: relative;
    color: #333333;
}
.mySelect {
    width: 100%;
    padding-right: 0.48rem;
    height: 0.36rem;
    line-height: 0.36rem;
    position: relative;
}
.mySelect:before {
    content: "";
    width: 0.18rem;
    height: 0.1rem;
    background: url(../image/addAct.png) no-repeat 0/100% 100%;
    position: absolute;
    top: 50%;
    margin-top: -0.05rem;
    right: 0;
}
.myOptionsBox {
    display: none;
    box-sizing: border-box;
    width: 100%;
    /* height: 2rem; */
    border: 1px solid rgb(59, 59, 59);
    overflow: hidden auto;
    background: rgb(255, 255, 255);
    box-shadow: 0px 2px 8px 4px rgb(108 108 108 / 26%);
    position: absolute;
    top: 0.4rem;
    right: -0.48rem;
    text-align: left;
    z-index: 2;
}
.myOptionsBox li {
    display: block;
    white-space: nowrap;
    line-height: 0.6rem;
    padding: 0px 0.2rem;
}
.myOptionsBox .selectAct {
    color: #fff;
    background: #cfefff;
}
.myOptionsBox li::selection,
.myOptionsBox li:hover {
    color: #fff;
    background: #cfefff;
}
.myOptionsBox li:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}