切换隐藏/显示下拉菜单选择事件

Toggle hide/show on drop down menu select event

本文关键字：下拉菜单 选择 事件 显示 隐藏      更新时间：2023-09-26

我有一个id为menuItem的下拉列表。当选择一个选项时，我需要通过this.id显示相关的项目列表。

 $("#menuItem").on("click", ".restaurant", function() {
    $(".item").hide().filter("[data-source=" + this.id + "]").show();
    return false;
});

无法显示此子列表。

如果您有兴趣在页面的特定元素或部分中切换显示/隐藏，那么您应该使用jquery"toggle"函数。给出是切换功能的一个简单示例

$("button").click(function(){
  $("p").toggle();
});

这将简单地切换页面中"p"元素的显示/隐藏，您可以指定元素id。

尝试$(this).attr('id')而不是this.id。。。。这是正确的jQuery语法。。。

$("#menuItem").on("click", ".restaurant", function() {
        $(".item").hide().filter("[data-source=" + $(this).attr('id') + "]").show();
        return false;
    });

如果有人想知道，这是工作代码：

            $("#restaurant").on("change", function (event) {
                $("option:selected").each(function () {
                   $('.item').hide().filter("[data-source=" + this.id + "]").show();
                });
相关文章：