如何使下拉列表中的一个选定项成为下拉列表

时间:2018-08-03 13:24:41

标签: html bootstrap-4

当我选择任何一项时,下拉菜单中有两个项目,那么只有特定的项目数据才会出现。默认情况下,我要一个数据出现。

html

<div class="box-header">
                    <div class="dropdown" align="left">
                        <button class="" type="button" data-toggle="dropdown" style="height:22px;" align="center">
                            <span style="font-size:18px;font-family:sans-serif">Select Water Tank </span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" >
                            <li><a href="@Url.Action("list", "Watertank" ,new { deviceid="f2"})"><span style="font-size:large">Top</span></a></li>
                            <li><a href="@Url.Action("list", "Watertank" ,new { deviceid="52"})"><span style="font-size:large">Bottom</span></a></li>
                        </ul>
                    </div>
                </div>

1 个答案:

答案 0 :(得分:0)

您可以通过将下拉菜单从<ul>更改为<select>

下面的代码应默认选择“顶部”

<div class="box-header">
                    <div class="dropdown" align="left">
                        <button class="" type="button" data-toggle="dropdown" style="height:22px;" align="center">
                            <span style="font-size:18px;font-family:sans-serif">Select Water Tank </span>
                            <span class="caret"></span>
                        </button>
                        <select class="bootstrap-select" >
                            <option selected="selected"><a href="@Url.Action("list", "Watertank" ,new { deviceid="f2"})"><span style="font-size:large">Top</span></a></option>
                            <option><a href="@Url.Action("list", "Watertank" ,new { deviceid="52"})"><span style="font-size:large">Bottom</span></a></option>
                        </select>
                    </div>
                </div>