如何在选项选择上将“已选择”添加到“选择控制”选项

如何解决如何在选项选择上将“已选择”添加到“选择控制”选项

我有一个函数，可以从页面中提取标题并将其作为选项添加到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);