Javascript 尝试从自定义下拉菜单中获取特定值

我正在尝试创建一个自定义的select菜单，只是想看看我是否能做到，但我遇到了一些问题。当用户单击该框时，我希望用户能够选择一个选项并将其显示在该特定框中。我遇到的问题是，无论从哪个菜单中选择，选中的文本都会显示在每个框中。我该如何解决这个问题

这是我的钢笔

挑选

剧本

---

当您点击某个选项时，您将引用变量select

var select=$.select

如果使用类select调用所有元素，则需要使选择器更具体。尝试添加以下行：

$(select).on("click", function(){
    select = $(this); //ADD THIS
    $(this).find(".option-menu").each(function(){
    $(this).toggle();
})

---

检查演示

您必须使用特定的容器div

<div class="container1">
     <div class="select">
        <div class="arrow-down"></div>
        <div class="option-menu">
            <div class="option">Hello</div>
            <div class="option">Goodbye</div>
        </div>
    </div>
</div>

var select = $(".container1 .select");
    $(select).on("click", function(){
        $(this).find(".option-menu").each(function(){
            $(this).toggle();
        })

        $(".container1 .option").on("click", function(){
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(select).children("p").remove();
            var option = $(this).text();
            console.log(option);
            $(select).prepend("<p>" +option +"<p>");
        })
    })

您的问题是，您对2个元素使用相同的类。 如果我是你，我会以jquery插件的形式编写这种代码

//使用插件，您可以用一行代码创建代码。

---

$'container'.createSelectMenu

令人敬畏。非常感谢。我想让它成为一个插件，但我还不知道怎么做。也许我应该研究一下。

$(select).on("click", function(){
    select = $(this); //ADD THIS
    $(this).find(".option-menu").each(function(){
    $(this).toggle();
})

<div class="container1">
     <div class="select">
        <div class="arrow-down"></div>
        <div class="option-menu">
            <div class="option">Hello</div>
            <div class="option">Goodbye</div>
        </div>
    </div>
</div>

var select = $(".container1 .select");
    $(select).on("click", function(){
        $(this).find(".option-menu").each(function(){
            $(this).toggle();
        })

        $(".container1 .option").on("click", function(){
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(select).children("p").remove();
            var option = $(this).text();
            console.log(option);
            $(select).prepend("<p>" +option +"<p>");
        })
    })