我需要使用键值对的对象将选项下拉列表添加到选择元素[重复]

Posted 2023-05-07

【中文标题】我需要使用键值对的对象将选项下拉列表添加到选择元素[重复]

【英文标题】：I need to add a options dropdown to a select element using an object of keyvalue pairs [duplicate]

【发布时间】：2019-08-31 12:39:06

【问题描述】：

这是对象的样子：

0: Key: "1", Value: "cat1"
1: Key: "2", Value: "cat2"
2: Key: "3", Value: "cat3"
3: Key: "4", Value: "cat4"
4: Key: "5", Value: "cat5"

html：

<select id="edit-category-dropdown" class="selectpicker" multiple data-selected-text-format="count > 3" data-style="custom-select">

我需要为这个选择元素添加下拉选项，其值为 attrib = object.key，内部文本为 = object.Value。

理想情况下，我希望它采用这种格式。 <option value=object.Key>object.Value</option>

我已尝试附加到元素，但它似乎不起作用。

更新：显然问题不是我的代码附加了一个新的下拉列表，而是我没有在我的选择元素上执行 .selectpicker("refresh") 的事实。它解决了显示问题。

【问题讨论】：

我能够让它工作。我能够让它与我以前的代码一起工作。我只是没有意识到它，因为它没有显示。但是，问题在于 bootsrap-select 的引导版本。它似乎不想显示我的下拉选项。当我从我的属性中取出 class="selectpicker" 时，它只显示一个我不想要的选项列表，并且更喜欢下拉列表。如果这有意义的话。

【参考方案1】：

使用一些javascript：

var obj = [ Key: "1", Value: "cat1",
 Key: "2", Value: "cat2",
 Key: "3", Value: "cat3",
 Key: "4", Value: "cat4",
 Key: "5", Value: "cat5"]

for (var i = 0; i < obj.length; i++)
  document.getElementById("edit-category-dropdown").innerHTML +=
"<option value='" + obj[i].Key + "'>" + obj[i].Value + "</option>";

【参考方案2】：

让甜蜜和简单。我只是写了一个基本的Javascriptfor循环方法。试试这个，希望能帮到你。谢谢

var array = [
	Key: "1", Value: "cat1",
	Key: "2", Value: "cat2",
	Key: "3", Value: "cat3",
	Key: "4", Value: "cat4",
	Key: "5", Value: "cat5"
]

var modelList = document.getElementById("edit-category-dropdown");
if (array) 
  var i;
  for (i = 0; i < array.length; i++) 
    var singleValue = new Option(array[i].Value, array[i].Key);
    modelList.options.add(singleValue);
  

<select id="edit-category-dropdown" class="selectpicker" multiple data-selected-text-format="count > 3" data-style="custom-select">

【参考方案3】：

$(availableOptions).each(function(_,item)
$('#edit-category-dropdown').append($('<option>',  value: item.Key, text: item.Value ));
$("#edit-category-dropdown").selectpicker("refresh");
);
```
I was able to figure it out. Seems like I just need to include .selectpicker to refresh it.