如何修复“自定义下拉列表”项目选择

Question

我使用了来自该网站的自定义下拉列表：https://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

我已经对其进行了自定义，并在一页中使用了两个表单。

当前问题：
1.当使用两种形式时，选择一种形式适用于两种形式。

问题：
1. 如何修复 jQuery 代码，使表单中的选择表现为单独的而不将其应用于两者？
2. 有没有更好的方法来自定义“选择表单”而不是使用无序列表并且适用于所有浏览器？

Codepen：https://codepen.io/lukas_kocka/pen/axeeOo

Java 脚本：

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $('.wrapper-dropdown-3').not(this).removeClass('active');
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click', function () {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue: function () {
        return this.val;
    },
    getIndex: function () {
        return this.index;
    }
}

$(function () {

    var dd = new DropDown($('.wrapper-dropdown-3'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});

我希望在选择项目时两种表单都可以单独使用。

非常感谢您的帮助！

Answer 1

问题 1： 出现此问题是因为两个下拉列表具有相同的 id="dd" class="wrapper-dropdown-3"

我认为您可以按以下方式修复它：

HTML：将第二个下拉列表的 id 更改为“dd1”

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<div id="dd1" class="wrapper-dropdown-3" tabindex="1">

js

$(function () {

    var dd1 = new DropDown($('#dd1'));
    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});