尝试使用dcc.Dropdown (multi )显示/隐藏html.Div元素

Question

目前正在尝试创建一个运动队统计页面，该页面将允许教练挑选和选择要查看的球员。想法是，我想有一个多下拉列表在顶部，显示/隐藏球员根据什么选择。

下面是我到目前为止的代码(忽略我已经加载了NumPy和Pandas这一事实；计划以后再做一些其他的事情……)：

from os import name
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import numpy as np

player_list = [
    "player-1",
    "player-2"
]

app = dash.Dash(__name__)

#server = app.server() # Put back in once you are ready to deply to Heroku

app.layout = html.Div([

    # navigation bar
    html.Div(
        className = "nav-container",
        children = [
            
            html.Nav(
                className = "nav",
                children = [
   
                    html.A(
                        "Home",
                        className = "a",
                        href="#"
                    ),
                    
                    html.Div(
                        className="dropdown",
                        children = [
                            
                            html.Button(
                                "About the Team",
                                className = "dropbtn"
                            ),
                            
                            html.Div(
                                className = "dropdown-content",
                                children = [
                                    html.A(
                                        "Team Stats",
                                        href = " "
                                    ),
                                    html.A(
                                        "PLACEHOLDER",
                                        href = " "
                                    )
                                ]
                            )
                        ]
                    ),
                    html.Div(
                        className="dropdown",
                        children = [
                            html.Button(
                                "PLACEHOLDER",
                                className = "dropbtn"
                            ),
                            html.Div(
                                className = "dropdown-content",
                                children = [
                                    html.A(
                                        "PLACEHOLDER",
                                        href = " "
                                    ),
                                    html.A(
                                        "PLACEHOLDER",
                                        href = " "
                                    )
                                ]
                            )
                        ]
                    )
                ]
            ),
        ]
    ),

    # Welcome header
    html.Div([
        html.H1(
            "Welcome to the Team Divergent Stats Page!",
            className = "welcome-header"
        )
    ]),

    html.Br(),

    dcc.Dropdown(
        id = "dropdown-to-show_or_hide-player",
        options = [
            {"label": "player-1", "value": "player-1"},
            {"label": "player-2", "value": "player-2"}
        ],
        value = None,
        multi = True
    ),

    html.Br(),

    # player card
    html.Div(
        id = "player-1",
        style = {"display": "none"},
        children = [
            html.Div(
                className = "player-card",
                children = [

                    html.Div( #player pic/avatar
                        className = "player-avatar",
                        children = [
                            html.H2("player-1 - POSITION"),
                            html.Hr(),
                            html.Img(src = " ", alt = "player-image")
                        ]
                    )
            ]),
            
            html.Div(
                children = [
                    html.Div( # player stats card
                        className = "player-stats-1",
                        children = [

                            html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        )
                    ]
                ),

                html.Div( # player stats card
                    className = "player-stats-2",
                    children = [

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        )
                    ]),

                html.Div( # player stats card
                    className = "player-stats-2",
                    children = [

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")
                            ]
                        )          
                    ]
                )   
            ]),
            html.Br(),
            html.Hr(),
            html.Br()   
        ]
    ),

    # player card
    html.Div(
        id = "player-2",
        style = {"display": "none"},
        children = [
            html.Div(
                className = "player-card",
                children = [

                    html.Div( #player pic/avatar
                        className = "player-avatar",
                        children = [
                            html.H2("player-2 - POSITION"),
                            html.Hr(),
                            html.Img(src = " ", alt = "player-image")
                        ]
                    )
            ]),
            
            html.Div(
                children = [
                    html.Div( # player stats card
                        className = "player-stats-1",
                        children = [

                            html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        )
                    ]
                ),

                html.Div( # player stats card
                    className = "player-stats-2",
                    children = [

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        ),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]
                        )
                    ]),

                html.Div( # player stats card
                    className = "player-stats-2",
                    children = [

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")   
                            ]),

                        html.Div(
                            className = "player-stats-card",
                            children = [
                                html.H4("Stat"),
                                html.Hr(),
                                html.P("Stat Value")
                            ]
                        )          
                    ]
                )   
            ]),
            html.Br(),
            html.Hr(),
            html.Br()   
        ]
    )
])

@app.callback(
    Output("player-1", "style"),
    [Input("dropdown-to-show_or_hide-player", "value")]
)
def show_hide_player1(value):
    if value == ["player-1"]:
        return {"display": "block"}
    else: 
        return {"display": "none"}

@app.callback(
    Output("player-2", "style"),
    [Input("dropdown-to-show_or_hide-player", "value")]
)
def show_hide_player2(value):
    if value == ["player-2"]:
        return {"display": "block"}
    else: 
        return {"display": "none"}
        


if __name__ == "__main__":
    app.run_server(debug=True)

到目前为止，如果在顶部的多个下拉菜单中选择了"player-1“或"player-2”，它的工作效果很好("player-1“的统计值在选择"player-1”时显示出来，等等)。但是，每当我同时选择了"player-1“和"player-2”时，什么都不会出现。

对于如何使这项工作按计划进行，有什么见解吗？

谢谢。

-Edit：

下面是我的样式表，所以您可以看到我在加载时所看到的内容：

/* Overall top navbar style */
.nav-container {
    background: #333;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}
.nav {
    background: #333;
    top: 0;
    z-index: 999;
}

/* Style the links inside the navigation bar */
.nav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    font-family: "Verdana";
    margin-right: 30px;
    margin-left: 30px;
}

.nav div {
    margin-right: 30px;
    margin-left: 30px;
}

/* Change the color of links on hover */
.nav a:hover, .dropdown:hover, .dropbtn:hover {
    background-color: #F76900;
    color: black;
}


/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: "Verdana"; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F76900;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "Verdana";
}
  
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
  
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
color: black;
}

/* For standalone buttons */
.button {
    margin: 0px 10px 0px 10px;
}

/* For App container (to align them */
.app-container {
    margin-top: 20px;
    display: flex;
}

/* For individual app cards */
.app-card {
    flex: 1;
    border: 2px solid black;
    margin: 10px 20px 20px 20px;
    text-align: center;
    box-shadow: 10px 10px 5px grey;
}

.app-card img {
    border-radius: 20%;
}

.app-card:hover {
    background: darkgray;
}

.title-p {
    text-align: center;
    text-decoration: wavy;
}

.banner-img-container {
    width: 100%;
    height: 50px;
    margin: 0px 0px 0px 0px;
    align-items: center;
    position: relative;
}

.banner-img-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 5px; 
    width: 100%;
    height: 800px;
}

.intro-container {
    margin-top: 40px;
    display: flex;
}

.intro-card {
    flex: 1;
    border: 2px solid black;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
    box-shadow: 10px 10px 5px grey;
}

.intro-card p {
    padding: 0px 10px 10px 10px;
    text-align: left;
}

.intro-card hr {
    width: 60%;
}

.skill-container {
    margin-top: 20px;
    display: flex;
}

.skill-card {
    flex: 1;
    border: 2px solid black;
    margin: 10px 20px 20px 20px;
    text-align: center;
    box-shadow: 10px 10px 5px grey;
    padding: 10px 10px 10px 10px;
}

.skill-icon-img {
    width: 20px;
    height: 20px;
}

/* Need to find the tutorial with the stacked timeline */
.timeline-container {
    text-align: center;
}

.closing-statement-container {
    text-align: center;
}

.footer-container {
    text-align: center;
}

.text-block {
    bottom: 100px;
    right: 0px;
    background-color: white;
    color: black;
    padding-left: 20px;
    padding-right: 20px;
}

.header2 {
    text-align: center;
}

.header2-p {
    text-align: center;
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
  
/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: black;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
  
/* Container around content */
.container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}
  
/* The circles on the timeline */
.container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
  
/* Place the container to the left */
.left {
    left: -6.75%;
}
  
/* Place the container to the right */
.right {
    left: 50%;
}
  
/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid black;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent lightgrey;
}
  
/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid black;
    border-width: 10px 10px 10px 0;
    border-color: transparent lightgrey transparent transparent;
}
  
/* Fix the circle for containers on the right side */
.right::after {
    left: -16px;
}
  
/* The actual content */
.content {
    padding: 20px 30px;
    background-color: lightgrey;
    position: relative;
    border-radius: 6px;
}
  
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
    .timeline::after {
    left: 31px;
}
  
/* Full-width containers */
.container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
}
  
/* Make sure that all arrows are pointing leftwards */
.container::before {
    left: 60px;
    border: medium solid black;
    border-width: 10px 10px 10px 0;
    border-color: transparent black transparent transparent;
}
  
/* Make sure all circles are at the same spot */
.left::after, .right::after {
    left: 15px;
}

/* Make all right containers behave like the left ones */
.right {
    left: 0%;
}}

.signature-block {
    text-align: right;
    margin-right: 500px;
    margin-top: 50px;
}

.signature-block img {
    text-align: right;
    margin-right: 70px;
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 1px solid green;
}

.welcome-header {
    text-align: center;
    margin-top: 75px;
}

.team-picture {
    text-align: center;
}

.coach-info {
    text-align: center;
}

.player-card {
    display: inline;
}

.player-avatar {
    float: left;
    border: 2px solid black;
    width: 30%;
    height: 425px;
    margin: 5px 10px 0px 10px;
    text-align: center;
    box-shadow: 3px 3px 1px lightgrey;
}

.player-avatar hr {
    width: 50%;
}

.player-avatar img {
    width: 30%;
    height: 425px;
    margin: 5px 10px 0px 10px;
    text-align: center;
}

.player-stats.container {
    display: inline;
}

.player-stats-1 {
    display: flex;
    /* border: 2px solid black; */
    width: 67%;
    margin: 10px 10px 10px 10px;
    text-align: center;
    padding: 5px 5px 5px 5px;
}

.player-stats-2 {
    display: flex;
    /* border: 2px solid black; */
    width: 67%;
    margin: 10px 10px 10px 445px;
    text-align: center;
    padding: 5px 5px 5px 5px;
}

.player-stats-card {
    flex: 1;
    margin: 0px 5px 0px 5px;
    border: 2px solid black;
    box-shadow: 3px 3px 1px lightgrey;
    float: right;
}

.player-stats-card h6 {
    font-weight: bold;
}

.player-stats-card p {
    font-size: 20px;
}

Answer 1

我找到了一个解决方案(也许不是最好的解决方案，但它是一个解决方案)！

下面是@app.callback()的格式，我可以让曾傑瑞钻机让它像我想的那样工作。

@app.callback(
    Output("player-1", "style"),
    [Input("dropdown-to-show_or_hide-player", "value")]
)
def show_hide_player1(value):
    if "player-1" in value:
        return {"display": "block"}
    else:
        return {"display": "none"}
        

@app.callback(
    Output("player-2", "style"),
    [Input("dropdown-to-show_or_hide-player", "value")]
)
def show_hide_player2(value):
    if "player-2" in value:
        return {"display": "block"}
    else:
        return {"display": "none"}

使用此解决方案，必须创建一个@app.callback()和`show_hide_player"X"，这将允许独立于其他元素更改每个元素的样式属性。

目前，这个解决方案对我有效，但我非常感兴趣，看看是否有一个更好，更经济/精简的方式来做它！我百分之百肯定我的方式不是最好的方法。