【问题标题】:Populating a select element with comma-separated values using for loop使用 for 循环使用逗号分隔值填充选择元素
【发布时间】:2015-03-11 06:14:22
【问题描述】:

我有一堆以逗号分隔的值作为字符串存储在 JSON 文件中。我的目标是拆分这些值以填充基于 Selectize.js 的选择元素。代码(摘录)如下:

var options = {};

var attr_split = data.attributes['Attribute1'].split(",");

var options_key;

for (var i = 0; i < attr_split.length; i++) { 
    options_key = attr_split[i]
    }

var options_values = {
    value: options_key,
    text: options_key,
    }

    if (options_key in options)
        options_values = options[options_key];
    options[options_key] = options_values;

$('#input').selectize({
    options: options,
});

虽然这似乎可行,但 select 元素中的输出只显示了 for 循环完成的最后一次迭代。根据herehere,我试过了

for (var i = 0; i < attr_split.length; i++) { 
    var options_key += attr_split[i]
    }

但这会抛出 undefined 以及所有没有分隔符的连接字符串,如下例所示:

undefinedAttr1Attr2Attr3

当我使用手动输入数组元素来简单地测试循环时,一切看起来都很好:

for (var i = 0; i < attr_split.length; i++) { 
    var options_key = attr_split[0] || attr_split[1] || attr_split[2]
    }

但这不是要走的路,因为每个字符串的元素数量不同。

知道我在这里做错了什么吗?我觉得这很简单:)

【问题讨论】:

  • 你能发帖data.attributes['Attribute1']
  • 当然可以。这是它在 JSON 中的存储方式:"Attribute1":"Attr1,Attr2"

标签: javascript arrays for-loop


【解决方案1】:

当你声明'options_key'时,你没有初始化它。所以它的值是undefined。当你连接options_key += attr_split[i]时。在第一次迭代中options_key保持undefined。所以只有你得到undefinedAttr1Attr2Attr3 .

所以声明并初始化options_keylike。

var options_key="";

在你的循环中

for (var i = 0; i < attr_split.length; i++) 
{ 
     options_key = attr_split[i]
}

每次将options_key 替换为attr_split[i].so 在循环之后它将包含最后一个元素值。更正的代码是

for (var i = 0; i < attr_split.length; i++) 
{ 
    options_key += attr_split[i]
}

【讨论】:

  • 谢谢。这确实解决了undefined,但是导致所有拆分字符串在选择输入中再次连接。因此像这样:Attr1Attr2Attr3。我的目标是让拆分字符串的结果显示为单独的值,例如 Attr1、Attr2 和 Attr3。这在使用options_key = attr_split[i] 时有效,但只显示最后一次迭代。关于如何使用分隔值填充选择的任何想法,包括最后一个旁边的所有其他迭代?
  • 你能贴出填充select元素的代码吗?
  • 感谢您的提琴!我想我明白它在你的例子中是如何工作的。然而,我的选项填充在 options 变量中,然后将其输入到基于 Selectize.js 的输入元素中。我将执行此操作的代码添加到原始帖子中。关于在这种情况下如何做的任何想法?
  • sry,我对 selectize.js 不熟悉。你能举一个选项变量的示例结构吗?
  • 当然,这就是它的样子(JSON):{ "Attr1": { "value": "Attr1", "text": "Attr1" }, "Attr2": { "value": "Attr2", "text": "Attr2" } }
【解决方案2】:

只需将var options_key; 更改为var options_key="";

你得到未定义的原因是因为你没有正确定义变量。

这是一个工作示例

 var attr_split = "1,2,3,4".split(",");

var options_key="";

for (var i = 0; i < attr_split.length; i++) { 
    options_key += attr_split[i]
    }

    alert(options_key);
var options_values = {
    value: options_key,
    text: options_key
}
alert(options_values);

【讨论】:

  • 谢谢。请参阅我对上一个答案的评论以获取后续问题。
猜你喜欢
  • 2013-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-17
  • 2023-03-17
  • 2011-09-24
相关资源
最近更新 更多