javascript - 样式 ASP.net DropDownList 不选择元素下拉列表

Question

我想设计我的 asp 下拉列表的样式，但我在网上找到的所有解决方案都与带有 select 元素的下拉列表相关。现在我正在使用 bootstrap 来尝试获得如下所示的输出，但我也可以使用其他方法，如 css 和 jquery，只要我能获得如下所示的输出。

这是我目前的输出:

这是我想要实现的输出: 这是我的代码:

    //aspx file
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="Scripts/jquery-1.8.0.min.js"></script>
    <script src="Scripts/bootstrap-select.min.js"></script>
    <link href="Content/bootstrap-select.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

<script type="text/javascript">

    $(document).ready(function () {

        $(".form-control").form - control();

    });

</script>

            <asp:DropDownList ID="DropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" ForeColor="Black" CssClass="form-control"> 

感谢您的帮助!

Answer 1

正如我之前所说，那是您要实现的下拉按钮，您必须将 Bootstrap 类 btn btn-default 添加到您的下拉列表中，如下所示:

<asp:DropDownList ID="DropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" ForeColor="Black" CssClass="btn btn-default form-control">

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="btn btn-default">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我已经创建了一支笔供您测试Test it here