javascript - JQuery - 在列表中更改显示/隐藏具有 ID 匹配选项值的元素

Question

我有一个包含动态创建的表格的页面。这些表的 ID，存储在 DB 中，可以匹配页面上选择列表的值。

默认隐藏所有表格。

我想根据所选的选项值显示和隐藏表格。显示与所选选项值匹配 ID 的表，并隐藏其他不匹配的表。

下面的代码用于显示匹配表。但是，如果不匹配所选选项，我该如何隐藏表格？

$('#unit_table').hide();

$('#program_levels').change(function(){
            if($("#" + this.value + "_table").is(":hidden")){
                $("#" + this.value + "_table").show();
            } else {

            }
            });

Answer 1

您可以使用 ends with 属性选择器来隐藏所有 id 以 _table 结尾的不匹配表，见下面的代码

JQuery Ends with Attribute Selector API

$('#unit_table').hide();

$('#program_levels').change(function(){
    //hide all tables 
    $("table[id$='_table'").hide();
    //show all matching tables only
    //if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
         $("#" + this.value + "_table").show();
    //} 
 });