循环时检查选择框中的值答案

【问题标题】：Checking for a value within select box while looping循环时检查选择框中的值
【发布时间】：2018-03-27 00:56:41
【问题描述】：

我正在循环 Ajax 结果并将 JSON 填充到 select 框中，但并非每个 JSON 结果都是唯一的，有些包含相同的值。

我想在循环迭代时检查select 框中是否已经包含一个值，如果一个值相同，则不要再次打印它，但由于某种原因我的if 检查是不工作？

for (var i = 0; i < result.length; i++) {

var JsonResults = result[i];
var sourcename = JsonResults.Source.DataSourceName;

if ($('.SelectBox').find('option').text != sourcename) {
    $('.SelectBox').append('<option>' + sourcename + '</option>');                             
   }
}

【问题讨论】：

您应该修复该 JSON 的创建不包含 dup。
$('.SelectBox').find('option').text() 只会返回第一个选项的文本。此循环不会告诉您该文本是否已经存在选项。
你为什么不直接从数组中删除重复项，result = $.unique(result)？
你为什么不在选项中设置值？为什么你更喜欢选项文本作为选择器？

标签： javascript jquery html loops

【解决方案1】：

text() 是一个方法，所以它需要括号，它返回所有 <option> 连接的文本。有更好的方法可以做到这一点，但类似于您的方法可以使用变量来保存所有添加的文本，因此我们可以检查此变量，而不必检查 <option> 元素：

var result = ["first", "second", "first", "third", "second"];

var options = {};
for (var i = 0; i < result.length; i++) {
  var JsonResults = result[i];
  var sourcename = JsonResults; //JsonResults.Source.DataSourceName;

  if (!options[sourcename]) {
    $('.SelectBox').append('<option>' + sourcename + '</option>');
    options[sourcename] = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="SelectBox"></select>

注意：我只在演示中使用了var sourcename = JsonResults;。请改用原来的行。

【讨论】：

【解决方案2】：

.text是一个函数，所以你必须调用它才能取回选项中的文本

for (var i = 0; i < result.length; i++) {

  var JsonResults = result[i];
  var sourcename = JsonResults.Source.DataSourceName;

  if ($('.SelectBox').find('option').text() != sourcename) {
    $('.SelectBox').append('<option>' + sourcename + '</option>');                             
  }
}

【讨论】：

【解决方案3】：

一方面，jQuery 方法是.text() - 它不是静态属性。另一方面，您的.find 将为您提供每个<option> 的组合文本，这不是您想要的。

在填充 HTML 之前尝试对对象进行重复数据删除：

const sourceNames = results.map(result => result.Source.DataSourceName);
const dedupedSourceNames = sourceNames.map((sourceName, i) => sourceNames.lastIndexOf(sourceName) === i);
dedupedSourceNames.forEach(sourceName => {
  $('.SelectBox').append('<option>' + sourceName + '</option>');
});

【讨论】：