根据下拉选择在 PUG 模板中加载 HTML 表答案

【问题标题】：Load HTML Table in PUG template based on dropdown selection根据下拉选择在 PUG 模板中加载 HTML 表
【发布时间】：2018-10-19 19:13:33
【问题描述】：

tl;dr：为了清楚简洁地了解我想要什么，当用户从下拉选择器列表中选择一个状态时，我只希望表格显示与该状态相关的位置。在页面加载时，用户将查看整个表格。然后我希望能够根据下拉选择过滤视图。我希望这是有道理的。我有一个用 jquery 编写的函数，但它并没有完全符合我的预期

我在下拉列表中有一个 list states，如下所示：

select#states(form='addProperty', name='propertyType') 
      option(value='0') -- Select A State --
      option(value='AL') Alabama
      option(value='AK') Alaska
      option(value='AZ') Arizona
      option(value='AR') Arkansas 
      option(value='CA') California
      option(value='CO') Colorado
      option(value='CT') Connecticut
      option(value='DE') Delaware
      option(value='FL') Florida

我还有一张如下所示的表格： Example Table

我在 pug 模板中写了这个 table，如下所示：

table.table
    tr 
        th State
        th Description 
        th SMS ID Name
            for item in lists
                tr
                    td.state #{item.state}
                    td #{item.name}
                    td #{item.location}

我有这个 jquery 功能：

$("#states").on("change",
    function(){
        var a = $(this).find("option:selected").val();
        console.log(a);
        $("table tr td").each(
            function(){
                if($(this).html() != a){
                    $(this).hide();
                }
                else{
                    $(this).show();
                }
        });
});

此功能隐藏了除“状态”列之外的所有内容。例如：

function behavior

我知道我的函数被编码为隐藏没有与我的选择匹配的 .html 值的所有内容，但我不知道如何隐藏与我的选择不匹配的整行

我是初学者，所以请放轻松:)

【问题讨论】：

如果我可以改进我的问题，请告诉我，我是堆栈溢出的新手 :)

标签： javascript jquery node.js pug

【解决方案1】：

基本上把这篇文章当做橡皮鸭调试后，我自己的问题就解决了。

对于任何好奇的人，这是我的工作解决方案。

table.table
    th State
    th Description 
    th SMS ID Name
        for item in lists
            tr(class=item.state)
                td.state #{item.state}
                td.name #{item.name}
                td.loc #{item.location}
                script.
                    var dropdown = document.getElementById("states");
                    dropdown.onchange = function({{console.log(dropdown.value);}};
                        $("#states").on("change",
                        function(){
                          var option = $(this).find("option:selected").val();
                          $("tr").each(
                            function(){
                              if($(this).hasClass(option)){
                                console.log(this);
                                $(this).show();
                              }
                              else{
                                $(this).hide();
                              }
                            });
                        });

最终解决方案非常简单。我必须为每一行动态分配一个类。我用tr(class=item.state) 做到了这一点。从那里我迭代了每个tr，并在下拉列表中检查了一个与我的选择相匹配的类。

我的帖子被浏览了超过 47 次，但没有得到回复，所以希望这篇帖子可以帮助到别人。

【讨论】：