動態填充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>

大家好，我正在嘗試通過代碼隱藏來填充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個問題

1. 當鼠標光標懸停在它上面時，它會顯示一個“ I”光標（當您編輯文檔或其他內容時出現），而不是手指形光標（如asp：dropdown的顯示方式）。
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());

});

另外，當您將鼠標懸停在li而不是a上時，光標將不是指針。但是您可以調整CSS以選擇光標樣式：

.dropdown-menu li {
    cursor: pointer;
}