代码之家 › 专栏 › 技术社区 › Josh

基于下拉选择在PUG模板中加载HTML表

pug node.js jquery javascript

Josh · 技术社区 · 6 年前

tl;dr:为了给我一个清晰简洁的想法,当用户从下拉选择器列表中选择一个状态时,我只希望表格显示与该状态相关的位置。在页面加载时,用户将查看整个表。然后,我希望能够根据下拉选择过滤视图。我希望这是有意义的。我有一个用jquery编写的函数,但它并没有完全达到我的预期

我有一个列表属于各州在这样的下拉列表中:

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

这是我写的桌子在a中 帕格犬 模板类似于:

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();
                }
        });
});

此函数隐藏除“State”列之外的所有内容。例如:

function behavior

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

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

1 回复 | 直到 6 年前

Josh 6 年前

在基本上使用此帖子作为橡皮鸭调试之后,我能够解决自己的问题。

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

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次,没有得到回复,所以希望这篇帖子可以帮助别人。