动态填充Bootstrap下拉列表

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> 

大家好， 我想通过代码隐藏在引导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个问题

1. 当鼠标光标悬停在它 显示一个“I”光标（一个当你正在编辑一个文档或某物时出现）而不是手指指针光标（就像它为asp：下拉菜单显示的那样）。
2. 单击列表项后，下拉列表中的文字会发生变化，但“向下箭头”消失。

请问谁能帮我解决这个问题？

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()); 

}); 

而且光标将不会是一个指针你鼠标悬停在李，而不是一个等。但你可以调整你的CSS来选择光标风格：

.dropdown-menu li { 
    cursor: pointer; 
}