Javascript 如何根据下拉值切换多个元素的可见性

我有以下HTML元素：

#categoryid is a dropdown/select
#addFoo is a button
#removeFoo is button
#Foo is a div
#Bar is a div

我正在使用以下脚本根据下拉列表中选择的内容更改这些元素的可见性：

$('#categoryid').change(function () {
    var category = $(this).val();
    if (category === 'Foo') {
        $('#addFoo').removeClass('invisible');
        $('#removeFoo').removeClass('invisible');
        $('#Foo').removeClass('invisible');
    }
    else if (category === 'Bar') {
        $('#Bar').removeClass('invisible');
    }

    if (category !== 'Foo') {
        $('#addFoo').addClass('invisible');
        $('#removeFoo').addClass('invisible');
        $('#Foo').addClass('invisible');
    }

    if (category !== 'Bar') {
        $('#Bar').addClass('invisible');
    }
});

CSS

---

有更好的方法吗？

您可以为这些

foo

元素提供一个公共类名

foo

（或

data-

属性，以您喜欢的为准）：

$（'#categoryid'）。更改（函数（）{
如果（this.value==='Foo'）{
$（'.foo'）.removeClass（'invisible'）；
$（'#Bar'）.addClass（'不可见'）；
}else if（this.value==='Bar'）{
$（'#Bar'）。removeClass（'不可见'）；
$（'.foo'）.addClass（'不可见'）；
}
}).trigger（“change”）；//用于演示目的

。不可见{
显示：无；
}
div{/*用于演示目的*/
高度：50px；
线高：50px；
文本对齐：居中；
颜色：#fff；
背景：道奇蓝；
}

福
酒吧
福！
酒吧！
加富！
移除Foo当然！使用jquery和或
您可以直接使用jquery中的
show（）
，
hide（）
，
slideUp（）
，
slideDown（）
方法：

$('#divid').show();

下次，如果您发布示例
HTML
，而不是列出元素的类型，那就太好了…：）@A.Wolff我很好奇如何使用它来改进这段代码…@TJ也许@dotnetN00b只是在事件处理程序绑定后触发更改事件。顺便说一句，很抱歉现在很忙，没有时间写一个“正确”的答案，你仍然可以给自己写一个描述性的答案，并接受它来标记你的问题已经解决
$('#divid').show();