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

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

JS:

$（文档）.ready（函数（）{
var requestUri=“blah blah/_api/web/lists/getByTitle（'AD_DB'）/items？select=Title，State”；
var requestHeaders={
“接受”：“application/json；odata=verbose”
}
$.ajax({
url:requestUri，
键入：“GET”，
数据类型：“json”，
async:false，
headers:requestHeaders，
成功：功能（数据）{
$。每个（数据d.结果，函数（i，结果）{
var ItemCaseNumber=结果.标题；
var ItemState=result.State；
$（“#myList”）.append（“
”）；
});
},
错误：函数ajaxError（响应）{
警报（response.status+''+response.statusText）；
}
});
});

这是HTML：

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

---

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

引导默认情况下没有

optgroup

，但它使用了

下拉标题

。如果您真的想要选择组，您可以随时切换到

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

var results=[{State:'AZ'，Title:'Case 1234'}，
{州：'GA'，标题：'Case 4212'}，
{陈述：“IA”，标题：“案件23332”}，
{州：'LA'，标题：'Case 2221'}，
{州：'KS'，标题：'Case 4432'}，
{陈述：“MD”，标题：“案例2882”}，
{州：'KS'，标题：'Case 1022'}，
{州：'GA'，标题：'Case 1111'}]；
//按状态字段对结果进行排序。使用下面的compareStates功能
结果：排序（比较属性）；
var lastState=''；
$。每个（结果，函数（i，结果）{
var ItemCaseNumber=结果.标题；
var ItemState=result.State；
//为每个状态添加新标题
if（ItemState！=lastState）{
//如果这是下拉列表中的第一个状态，请不要添加分隔线
如果（i>0）{
$（“#myList”）.append（“
”）；
}
lastState=ItemState；
$（“#myList”）.append（“
”+ItemState+”
”）；
}
$（“#myList”）.append（“
”）；
});
功能区（a、b）{
如果（a状态b状态）
返回1；
返回0；
}

下拉列表

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