时间戳

首页 > 解决方案 > 如何使用 onchange() 清除 select 中的 innerHTML 选项？

javascript - 如何使用 onchange() 清除 select 中的 innerHTML 选项？

问题描述

我有两个选择下拉菜单。当我在第一个选择下拉列表中选择一个选项时，第二个选择下拉列表中的选项将显示取决于从第一个下拉列表中选择的值。

Javascript：

function selectorView() {
    var namaServis = document.getElementById('namaServis').options;
    var jenisServis = document.getElementById('jenisServis').value;
    if (jenisServis == 'ringan') {
        var teks = ["Pemeriksaan lampu", "Pemeriksaan kelayakan ban", "Pemeriksaan roda", "Pemeriksaan rem", "Pemeriksaan oli", "Pemeriksaan busi", "Penyetelan Gas", "Pemeriksaan Rantai",
            "Pemeriksaan Oli Gear", "Pemeriksaan Kopling"];
        teks.forEach(function (el) {
            var divNamaServis = document.getElementById('namaServis');
            var option = document.createElement('option');
            option.innerText = el;
            divNamaServis.appendChild(option);
        });
        console.log(namaServis);
    }
    else if (jenisServis == 'berat') {
        var teks = ["Pemeriksaan kebocoran klep", "Membersihkan ruang bakar & piston", "Skur Klep"];
        teks.forEach(function (el) {
            var divNamaServis = document.getElementById('namaServis');
            var option = document.createElement('option');
            option.innerText = el;
            divNamaServis.appendChild(option);
        });
        console.log(jenisServis.length);
    }
}

HTML：

<label for="jenisServis">Jenis Servis</label><br>
            <select onchange="selectorView()" name="jenisServis" id="jenisServis">
                <option value="" disabled selected>Choose one..</option>
                <option value="berat">Berat</option>
                <option value="ringan">Ringan</option>
            </select><br>
            <label for="namaServis">Nama Servis</label><br>
            <select name="namaServis" id="namaServis">
                <option value="" disabled selected>Choose one..</option>
            </select>

这是演示： https ://jsfiddle.net/scn3Lb2o/5/

问题是当我在第一个下拉列表中选择一个选项时，然后我选择另一个选项，第二个下拉列表中的选项将重复。任何人都可以帮忙吗？

标签： javascripthtml

解决方案

在添加新内容之前使用它来清除选择中的选项

document.getElementById('namaServis').options.length = 0;

推荐阅读