Populate Bootstrap DropDownList динамически

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> 

Привет, Я пытаюсь заполнить элементы Li в загрузочном dropdwnlist с помощью кода позади. 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()); 

}); 

Также курсор не будет указатель, как вы зависший над литий , а не a и т. д. Но вы можете настроить свой CSS, чтобы выбрать стиль курсора:

.dropdown-menu li { 
    cursor: pointer; 
}