gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:29:40 24 4
gpt4 key购买 nike

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

这是我的笔。

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

关于javascript - 尝试从自定义下拉菜单中获取特定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26391064/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com