Javascript 如何修复'；自定义下拉列表'；项目选择

我使用了此网站的自定义下拉列表：

我定制了它，并在一页中使用了两个表单

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

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

代码笔：

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');
    });

});

我希望在选择项目时，这两个表单都能单独工作

非常感谢你的帮助

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

我认为您可以按如下方式进行修复：

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

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

我认为您可以按如下方式进行修复：

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

---

谢谢你回复我！这是否意味着，如果我要在页面上有6个下拉列表，我需要为每个下拉列表单独进行操作？是的，据我所知，您需要为每个下拉列表单独进行操作。谢谢您回复我！这是否意味着，如果我要在页面上有6个下拉列表，我需要为每个下拉列表分别进行操作？是的，据我所知，您需要为每个下拉列表分别进行操作。

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

$(function () {

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

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

});