将optgroup添加到使用REST、jQuery和Boostrap动态创建的下拉列表中

Add optgroup to dropdown created dynamically using REST, jQuery and Boostrap

本文关键字：动态 Boostrap 创建 下拉列表 jQuery 添加 optgroup REST      更新时间：2023-09-26

这是我第一个使用Bootstrap的项目，我对jQuery也很陌生，所以我希望这个问题对你们中的一些人来说不要太简单。我创建了这个下拉列表，使用REST和Ajax从SharePoint提取数据。这部分效果很好。

JS:

$(document).ready(function () {
var requestUri = "blah-blah/_api/web/lists/getByTitle('AD_DB')/items?select=Title,State";
var requestHeaders = {
    "accept": "application/json;odata=verbose"
}
$.ajax({
    url: requestUri,
    type: 'GET',
    dataType: 'json',
    async: false,
    headers: requestHeaders,
    success: function (data) {
        $.each(data.d.results, function (i, result) {
            var ItemCaseNumber = result.Title;
            var ItemState = result.State;
            $('#myList').append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + ItemCaseNumber + '</a></li>');
        });
    },
    error: function ajaxError(response) {
        alert(response.status + ' ' + response.statusText);
    }
});
});

这是HTML:

<ul class="dropdown-menu" role="menu" aria-labelledby="drop1" id="myList"></ul>

正如我所提到的，下拉列表按预期填充，但这就是问题所在。是否有方法根据变量"ItemState"的值创建选项组，该变量包含SharePoint列表中的状态？谢谢

Bootstrap默认情况下没有optgroups，但它使用了dropdown-headers。如果你真的想要选择组，你可以随时切换到引导选择插件。

无论如何，这是一个带有下拉标题的示例：

var results = [{ State: 'AZ', Title: 'Case 1234'},
               { State: 'GA', Title: 'Case 4212'},
               { State: 'IA', Title: 'Case 23332'},
               { State: 'LA', Title: 'Case 2221' },
               { State: 'KS', Title: 'Case 4432' },
               { State: 'MD', Title: 'Case 2882'},
               { State: 'KS', Title: 'Case 1022' },
               { State: 'GA', Title: 'Case 1111' }];
// Sort results by State field. Uses the compareStates function below
results.sort(compareStates);
var lastState = '';
$.each(results, function (i, result) {
    var ItemCaseNumber = result.Title;
    var ItemState = result.State;
    // Add new header for each state 
    if (ItemState != lastState) {
      
        // Don't add a divider line if this is the first state in the dropdown
        if (i>0) {
            $('#myList').append('<li role="presentation" class="divider"></li>');
        }
      
        lastState = ItemState;
        $('#myList').append('<li role="presentation" class="dropdown-header">'+ItemState+'</li>');
    }
    
    $('#myList').append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + ItemCaseNumber + '</a></li>');
});
function compareStates(a,b) {
  if (a.State < b.State)
     return -1;
  if (a.State > b.State)
    return 1;
  return 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="drop1" id="myList"></ul>
</div>

相关文章：