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

Question

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

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

无法显示这个子列表。

Answer 1

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

            $("#restaurant").on("change", function (event) {

                $("option:selected").each(function () {

                   $('.item').hide().filter("[data-source=" + this.id + "]").show();

                });

Answer 2

如果您对切换显示/隐藏在特定元素或页面的一部分感兴趣，那么您应该使用jquery“切换”函数。给出了一个关于切换函数的简单例子。

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

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

Answer 3

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

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

        return false;
    });