css 如何显示下拉列表和隐藏另一个的基础上下拉选择的选项改变？

6ioyuze2 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(134)

我在blazor服务器端工作，我有下拉列表条件有2个选项
服务器
资料库

我的问题我不能显示和隐藏下拉选择基于选项从下拉条件。

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

预期结果

如果从下拉条件中选择选项0值服务器文本
显示服务器下拉列表和隐藏数据库下拉列表以及相关标签
如果从下拉条件中选择选项1值数据库文本
显示数据库下拉列表和隐藏服务器下拉列表及相关标签
我需要隐藏和显示的控件的完整代码

<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">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>

css

来源：https://stackoverflow.com/questions/75880454/how-to-show-drop-down-list-and-hide-anothers-based-on-drop-down-selected-option

1条答案

按热度按时间

oug3syen1#

一个简单的工作演示，你可以按照这里：

<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";
        }
    }
}

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何显示下拉列表和隐藏另一个的基础上下拉选择的选项改变？

1条答案

相关问题

热门标签

最新问答