2个数组之间的匹配值必须将选项HTML设置为禁用

Question

我是javascript新手。我有2个数组，如何匹配它们并返回HTML。如果两个数组中有匹配的值，则禁用select选项。例如：

var array1 = ["8:00AM", "9:00AM", "10:00AM","11:00AM",]
var array2 = ["11:00AM", "11:00AM", "3:00PM"]

array1.map((el, i) => <option key={i} disabled ={
el.includes(array2) ? true: false
}>{el}</option>))

我想发生的是，如果两个数组之间有匹配的值，在这种情况下为“ 11:00 AM”，它将返回：

<option> 8:00AM</option>
<option> 9:00AM</option>
<option> 10:00AM</option>
<option disabled = {true} > 11:00AM</option>
<option> 12:00PM</option>

类似的东西。我目前的方法可以做到这一点吗？

Answer 1

Array.prototype.includes()的语法为

Array.prototype.includes()

此外，您也可以如下使用arr.includes(valueToFind[, fromIndex]) ：

Template strings

var array1 = ["8:00AM", "9:00AM", "10:00AM", "11:00AM", ]
var array2 = ["11:00AM", "11:00AM", "3:00PM"]

const element = document.querySelector('select');
element.innerHTML = array1.map((el, i) =>
  `<option key=${i} ${array2.includes(el) ? 'disabled': ''}>${el}</option>`
).join('');

Answer 2

您可以使用

<select>
</select>

并检查值是否存在，请在下面的代码中尝试此操作

indexOf