以逗号分隔的列表进行数组和填充下拉列表

Question

我有这个动态的国家列表：

<div>Argentina, Brazil, Colombia, Ecuador</div>

我想使用以下格式将国家/地区作为选项添加到组合框下拉列表中：

options: [
     { data: 'Argentina' },
     { data: 'Brazil' },
     { data: 'Colombia' },
     { data: 'Ecuador' }
];

我已经弄清楚如何拆分/连接列表项以显示所需的数组，但不知道如何填充下拉列表。

https://jsfiddle.net/rj025tkb/

任何帮助将不胜感激，因为我几天来一直在寻找解决方案。最好不使用 JSON。

Answer 1

此行创建一个 JSON 格式的字符串，表示对象数组。

"[{data:'" + $(".mycountries").text().split(", ").join("'},{data:'") + "'}]"

请注意，这是一个字符串，而不是实际的 JavaScript 数组。如果您想创建国家/地区对象的实际 JavaScript 数组，可以通过拆分字符串并将其映射到对象来实现。

//Get the comma-separated list of countries
const countriesString = $(".mycountries").text().trim();
// Split the string into an array of country names and map each name into an object with the required structure
const countriesArray = countriesString.split(", ").map(country => {
  return {
    data: country
  };
});
// Create a dropdown list widget using that array
var mydropdown = new OO.ui.ComboBoxInputWidget({
  options: countriesArray
});
$("body").prepend(mydropdown.$element);
$("p").html(JSON.stringify(countriesArray));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/node_modules/oojs/dist/oojs.js"></script>
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui.js"></script>
<link rel="stylesheet" href="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.css">
<script src="https://doc.wikimedia.org/oojs-ui/master/demos/dist/oojs-ui-wikimediaui.js"></script>

<h3>Comma-separated list:</h3>
<div class="mycountries">Argentina, Brazil, Colombia, Ecuador</div>

<h3>Desired array:</h3>
<p> </p>