Question

我有一个使用twitter bootstrap的下拉菜单。我想 -

a）从我从数据库中提取的字符串数组中动态填充它。

b）将所选文本显示为替换默认下拉文字。

我该怎么做？

下拉菜单的当前代码如下：

 <div class="btn-group" role="group">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Dropdown
  <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>
    </div>

Answer 1

这里是example fiddle。我假设字符串数组可用于javascript / jQuery。

$(document).ready(function(){
    var myData = ['Option 1','Option 2','Option 3','Option 4'], //your array
        myItemList = $('#myDropdown .dropdown-menu');//ref to dd list 

    //clear contents of existing dropdown
    myItemList.html('');

    //iterate array and create dropdown links
    $(myData).each(function(index, element){
        var item = ('<li><a href="#">'+element+'</a></li>');
        myItemList.append(item);
    });


    //handler to change the text of the dropdown button
    $('#myDropdown').on('click', 'a', function(e){
        var setText = $(e.currentTarget).text(),
            newHtml = setText + '&nbsp;<span class="caret"></span>';
        $('#myDropdown > button').html(newHtml);
    });
});

HTH，

-Ted

如何显示下拉菜单的选定文本并从字符串数组中动态填充它？

1 个答案: