问题描述
我有一个函数,可以从页面中提取标题并将其作为选项添加到HTML select
组件中。但是,我遇到了麻烦,使选定的项目成为选择器中显示的选定选项。如何以编程方式将“选定的”属性添加到选定的选项?
<SelectControl
label="Select heading for jump link"
value={jumpLink}
id="selectheader"
options={[jumpLink]}
onChange={setJumpLink}
/>
let jumpLinkArray = [...document.querySelectorAll('.wp-block-heading')].map(item =>
item.innerText);
const select = document.getElementById('selectheader');
if (select && select.innerHTML) {
select.innerHTML = '';
}
for (let i = 0; i < jumpLinkArray.length; i++) {
let opt = jumpLinkArray[i];
let el = document.createElement('option');
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
解决方法
这是一个有关如何设置选定选项的选定状态,以便将其设置为组件视图中的状态的问题。诀窍是将setTimeout
向上移动。
setTimeout(() => {
let headingArray = [
...document.querySelectorAll(".wp-block-heading")
].map(item => item.innerText);
const select = document.getElementById("selectheader");
if (select && select.innerHTML) {
select.innerHTML = "";
}
for (let i = 0; i < headingArray.length; i++) {
let opt = headingArray[i];
let el = document.createElement("option");
el.textContent = opt;
el.selected = opt === jumpLink;
el.value = opt;
select.appendChild(el);
}
},1000);