0

在下面的代码中，当我change在<select>标签中执行事件时，我试图替换其中的选项，当它变为不同的值时，问题是，我如何删除标签中之前的存储选项<select>标签我存储一个新<option>标签？

请参阅此图像以了解问题

const massArray = ["tonne", "Kilogram", "Gram", "Milligram", "Microgram","Imperial ton", "US ton", "Stone", "Pound", "Ounce"]
const areaArray = ["Square kilometer", "Square meter", "Square mile", "Square yard", "Square foot", "Square inch", "Hectare"]

var mainSelect = document.getElementById('mainSelect');

mainSelect.addEventListener("change", () => {
    if (mainSelect.value == "Area") {
        for (let i = 0; i < areaArray.length; i++) {
            const para = document.createElement("option");
            const node = document.createTextNode(areaArray[i]);
            para.appendChild(node);
            const element = document.getElementById("ssSucf");
            element.appendChild(para);

            const para2 = document.createElement("option");
            const node2 = document.createTextNode(areaArray[i]);
            para2.appendChild(node2);
            const secondSelectBox = document.getElementById("secondSelectBox");
            secondSelectBox.appendChild(para2);
        }
    }else if (mainSelect.value == "Mass") {
        
        for (let i = 0; i < massArray.length; i++) {
            const para = document.createElement("option");
            const node  = document.createTextNode(massArray[i]);
            para.appendChild(node);
            const element = document.getElementById("ssSucf");
            element.appendChild(para);

            const para2 = document.createElement("option");
            const node2  = document.createTextNode(massArray[i]);
            para2.appendChild(node2);
            const secondSelectBox = document.getElementById("secondSelectBox");
            secondSelectBox.appendChild(para2);

         }
    }
})
4

0 回答 0