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

Trying to get specific values from a custom made drop down menu

本文关键字：获取 下拉菜单 自定义      更新时间：2023-09-26

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

这是我的钢笔。

http://codepen.io/RobbyT15/pen/LIKsJ

选择

<body>
    <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 class="select">
        <div class="arrow-down"></div>
        <div class="option-menu">
            <div class="option active">A</div>
            <div class="option">B</div>
            <div class="option">C</div>
        </div>
    </div>
</body>

脚本

$(document).ready(function(){
    var select = $(".select");
    $(select).on("click", function(){
        $(this).find(".option-menu").each(function(){
            $(this).toggle();
        })
        $(".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>");
        })
    })
})

当您单击某个选项时，您指的是变量select

var select=$（".select"）；

它调用select类的所有元素，您需要使选择器更加具体。尝试添加此行：

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

查看演示http://codepen.io/anon/pen/GaemF

您必须使用特定的容器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>");
        })
    })

您的问题是您对两个元素使用相同的类。如果我是你，我会把这种代码写成jquery插件。

//使用插件，您可以用一行代码创建代码。$（'#container'）.createSelectMenu（）；

相关文章：