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

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

我想使用以下格式将国家/地区作为选项添加到组合框收件箱中:

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

我已经弄清楚了如何拆分/连接列表项以显示所需的数组,但没有弄清楚如何填充收件箱.

https://jsfiddle.net/rj025tkb/

如果有任何帮助,我将不胜感激,因为几天来我一直在寻找解决方案.最好不使用SON.

推荐答案

此行创建一个代表对象数组的杨森格式字符串.

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

请注意,这是一个字符串,而不是实际的JavaScriptarray.如果您想创建国家/地区对象的实际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>

Javascript相关问答推荐

使脚本兼容于其他YouTube URL格式

Webpack将懒惰加载的模块放入主块中

我的JS代码将按照哪个序列被解释

如何用变量productId替换 1"

Angular material 表多个标题行映射

有Angular 的material .未应用收件箱中的价值变化

当在select中 Select 选项时,我必须禁用不匹配的 Select

如何在Angular中插入动态组件

使用JavaScript重新排序行

如何从一个列表中创建一个2列的表?

Regex结果包含额外的match/group,只带一个返回

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

VUE 3捕获错误并呈现另一个组件

TypeError:无法分解';React2.useContext(...)';的属性';basename';,因为它为空

环境值在.js文件/Next.js中不起作用

如何在.NET Core中将chtml文件链接到Java脚本文件?

未捕获的运行时错误:调度程序为空

如何用javascript更改元素的宽度和高度?

在GraphQL解析器中修改上下文值

不协调嵌入图片