How to display and hide drop down lists based on condition drop down list ?

Question

I work on blazor server side I have drop down list condition have 3 option

server and database and owner .

every option from these three options have one drop down list only

so server have drop down list

database have drop down list

owner have drop down list

and based on every select option from drop down condition

it will display drop down list related and hide others

drop down list condition have 3 options and based on it will show and hide related drop down as below

<select id="condition">
  <option value="0">Servers</option>
  <option value="1">Owner</option>
  <option value="2">DataBases</option>
</select>

for more details I need

if I select option 0 value server text from drop down condition

display server drop down and hide owner and database drop down with related labels

if I select option 1 value owner text from drop down condition

display owner drop down and hide server and database drop down with related labels

if I select option 2 value database text from drop down condition

display database drop down and hide server and owner drop down with related labels

full code

<div class="row">
                                <div class="col-lg-12 col-12 row">

                                    <div class="col-md-3 col-lg-2">
                                        <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">

                                            <span class="text-sm mb-0 text-capitalize font-weight-bold">Servers</span>
                                            &nbsp&nbsp
                                            <select class="form-select" @bind="@appfilter.serverID">
                                                <option value="0">--All--</option>
                                                @foreach (var servers in ServerNameDrop)
                                                {
                                                    <option value="@servers.serverID">
                                                        @servers.server_Name
                                                    </option>
                                                }

                                            </select>

                                        </div>
                                    </div>
                                    <div class="col-md-3 col-lg-2">
                                        
                                            <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">

                                            <span class="text-sm mb-0 text-capitalize font-weight-bold">Owner</span>
                                               
                                            &nbsp&nbsp
                                            <select class="form-select" @bind="@appfilter.ownerId">
                                                    <option value="0">--All--</option>
                                                    @foreach (var owne in OwnersData)
                                                    {
                                                        <option value="@owne.ownerId">
                                                    @owne.ownerFileNo
                                                        </option>
                                                    }

                                                </select>

                                            </div>
                                        
                                    </div>
                                    <div class="col-md-3 col-lg-2">
                                  
                                            <div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
                                            <span class="text-sm mb-0 text-capitalize font-weight-bold">DataBases</span>
                                                
                                            &nbsp&nbsp
                                            <select class="form-select" @bind="@appfilter.databaseId">
                                                    <option value="0">--All--</option>
                                                    @foreach (var dbd in dbdata)
                                                    {
                                                        <option value="@dbd.dbid">
                                                            @dbd.dB_Name
                                                        </option>
                                                    }

                                                </select>

                                            </div>
                                       
                                    </div>

                                    
                                   
                                    
                                </div>
                                
                            </div>

Answer 1

Hi @Ahmed Salah Abed Elaziz ,

Here is a simple demo you could follow:

<select id="condition" @onclick="@Hide" @bind="@SelectedOpt" >
    <option value="0">Servers</option>
    <option value="1">Owner</option>
    <option value="2">DataBases</option>
</select>
<div class="row">
    <div class="col-lg-12 col-12 row">
        <div class="col-md-3 col-lg-2">
            <div style="display:@ShowDropdown1; flex-direction: row; justify-content: center; align-items: center">
                <span class="text-sm mb-0 text-capitalize font-weight-bold">Servers</span>
                &nbsp&nbsp
                <select class="form-select" @bind="@appfilter.serverID">
                    <option value="0">--All--</option>
                    <option value="1">Server1</option>
                    <option value="2">Server2</option>

                </select>

            </div>
        </div>
        <div class="col-md-3 col-lg-2">

            <div style="display:@ShowDropdown2; flex-direction: row; justify-content: center; align-items: center">
                <span class="text-sm mb-0 text-capitalize font-weight-bold">Owner</span>
                &nbsp&nbsp
                <select class="form-select" @bind="@appfilter.ownerId">
                    <option value="0">--All--</option>
                    <option value="1">Owner1</option>
                    <option value="2">Owner2</option>
                    <option value="3">Owner3</option>
                </select>
            </div>
        </div>
        <div class="col-md-3 col-lg-2">
            <div style="display:@ShowDropdown3; flex-direction: row; justify-content: center; align-items: center">
                <span class="text-sm mb-0 text-capitalize font-weight-bold">DataBases</span>
                &nbsp&nbsp
                <select class="form-select" @bind="@appfilter.databaseId">
                    <option value="0">--All--</option>
                    <option value="1">database1</option>
                    <option value="2">database2</option>
                    <option value="3">database3</option>
                </select>
            </div>
        </div>
    </div>
</div>

@code {
    public Appfilter appfilter { get; set; } = new();
    public string SelectedOpt { get; set; } = "";
    public class Appfilter
    {
        public int serverID { get; set; }
        public int ownerId { get; set; }
        public int databaseId { get; set; }
    }
    private string ShowDropdown1 { get; set; } = "flex";
    private string ShowDropdown2 { get; set; } = "flex";
    private string ShowDropdown3 { get; set; } = "flex";
    private void Hide()
    {
        if (SelectedOpt=="0")
        {
            ShowDropdown1 = "flex";
            ShowDropdown2 = "None";
            ShowDropdown3 = "None";
        }
        else if(SelectedOpt=="1")
        {
            ShowDropdown2 = "flex";
            ShowDropdown1 = "None";
            ShowDropdown3 = "None";
        }
        else if(SelectedOpt=="2")
        {
            ShowDropdown3 = "flex";
            ShowDropdown1 = "None";
            ShowDropdown2 = "None";
        }
    }
}

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Rena

Answer 2

bind the condition select to a variable and use if statements based on its value to include or not include the desired selects in the html