2 个数组之间的匹配值必须将选项 HTML 设置为禁用
Matched values between 2 arrays must set the option HTML, to disabled
我是 javascript 的新手。我有 2 个数组,如何匹配它们和 return 和 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:00AM”,它将 return:
<option> 8:00AM</option>
<option> 9:00AM</option>
<option> 10:00AM</option>
<option disabled = {true} > 11:00AM</option>
<option> 12:00PM</option>
像这样。我目前的方法可行吗?
您可以使用 indexOf
并检查值是否存在,试试下面的代码
array1.map((el, i) => <option key={i} disabled={
array2.indexOf(el) > -1 ? true : false
}>{el}</option>)
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('');
<select>
</select>
我是 javascript 的新手。我有 2 个数组,如何匹配它们和 return 和 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:00AM”,它将 return:
<option> 8:00AM</option>
<option> 9:00AM</option>
<option> 10:00AM</option>
<option disabled = {true} > 11:00AM</option>
<option> 12:00PM</option>
像这样。我目前的方法可行吗?
您可以使用 indexOf
并检查值是否存在,试试下面的代码
array1.map((el, i) => <option key={i} disabled={
array2.indexOf(el) > -1 ? true : false
}>{el}</option>)
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('');
<select>
</select>