Question

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
Year <span class="caret"></span>
</button>

<ul id='demolist' class="dropdown-menu" runat="server" role="menu">

</ul>
</div>

大家好，我试图通过代码隐藏填充bootstrap dropdwnlist中的li项目。 PFB。页面加载的.cs代码。

        HtmlGenericControl li;

        for (int x = 3; x <= 10; x++)
        {
            li = new HtmlGenericControl("li");
            li.Attributes.Add("class", ".dropdown p");
            li.InnerText = "Item " + x;
            li.Disabled = false;
            demolist.Controls.Add(li);
        }

PFB js代码，单击时显示所选值。

   <script type="text/javascript">
    $(function(){

    $(".dropdown-menu li ").click(function(){

    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());

    });

      });
    </script>

现在，当我点击下拉列表时，它会显示列表项，但有2个问题

当鼠标光标悬停在它上面时显示一个'I'光标（编辑doc或其他东西时出现的光标）而不是手指指针光标（就像它显示为asp：dropdown的方式）。
单击列表项后，下拉列表的文本会发生变化，但“向下箭头”消失。

有人可以帮我解决这个问题吗？

Answer 1

当你用jQuery .text（）更改按钮的文本时，你也会覆盖span class =“caret”。

也许在按钮中添加另一个范围：

<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
    <span class="year">Year</span> <span class="caret"></span>
</button>

然后用你的JS：

来定位

$(".dropdown-menu li").click(function(){

    var li = $(this),
        btn = $('.btn:first-child'); // Maybe need a better selector?

    btn.find('span.year').text(li.text());
    btn.val(li.text());

});

当你将鼠标悬停在li而不是a等上时，光标也不会是指针。但是你可以通过调整你的CSS来选择光标样式：

.dropdown-menu li {
    cursor: pointer;
}

动态填充Bootstrap下拉列表

1 个答案: