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

Question

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

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/

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

Answer 1

在附加新内容之前使用它来清除选择中的选项document.getElementById('namaServis').options.length&nbsp;=&nbsp;0;

Answer 2

您应该在第一个选择的每次更改时删除除第二个选择中的第一个之外的所有选项。另外，您不应该在if和else if#namaServis块内多次引用相同的元素 ( ) ：function selectorView() {&nbsp; var namaEl = document.getElementById('namaServis');&nbsp; while (namaEl.childNodes.length > 2) { // remove all option except the first&nbsp; &nbsp; namaEl.removeChild(namaEl.lastChild);&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; var jenisServis = document.getElementById('jenisServis').value;&nbsp; if (jenisServis == 'ringan') {&nbsp; &nbsp; var teks = ["Pemeriksaan lampu", "Pemeriksaan kelayakan ban", "Pemeriksaan roda", "Pemeriksaan rem", "Pemeriksaan oli", "Pemeriksaan busi", "Penyetelan Gas", "Pemeriksaan Rantai",&nbsp; &nbsp; &nbsp; &nbsp; "Pemeriksaan Oli Gear", "Pemeriksaan Kopling"];&nbsp; &nbsp; teks.forEach(function (el) {&nbsp; &nbsp; &nbsp; var option = document.createElement('option');&nbsp; &nbsp; &nbsp; option.innerText = el;&nbsp; &nbsp; &nbsp; namaEl.appendChild(option);&nbsp; &nbsp; });&nbsp; &nbsp; //console.log(namaServis);&nbsp; }&nbsp; else if (jenisServis == 'berat') {&nbsp; &nbsp; var teks = ["Pemeriksaan kebocoran klep", "Membersihkan ruang bakar & piston", "Skur Klep"];&nbsp; &nbsp; teks.forEach(function (el) {&nbsp; &nbsp; &nbsp; var option = document.createElement('option');&nbsp; &nbsp; &nbsp; option.innerText = el;&nbsp; &nbsp; &nbsp; namaEl.appendChild(option);&nbsp; &nbsp; });&nbsp; &nbsp; //console.log(jenisServis.length);&nbsp; }}<label for="jenisServis">Jenis Servis</label><br><select onchange="selectorView()" name="jenisServis" id="jenisServis">&nbsp; &nbsp; <option value="" disabled selected>Choose one..</option>&nbsp; &nbsp; <option value="berat">Berat</option>&nbsp; &nbsp; <option value="ringan">Ringan</option></select><br><label for="namaServis">Nama Servis</label><br><select name="namaServis" id="namaServis">&nbsp; &nbsp; <option value="" disabled selected>Choose one..</option></select>