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

Question

i have two items in dropdown when any one i selects, then only the particular item data comes.i want one data by default come.

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>

Answer 1

You can do it by changing the drowdown from <ul> to <select>

The code below should have the 'top' one selected by default

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