如何使用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 = 0;

Answer 2

您應該在第一個選擇的每次更改時從第二個選擇中刪除除第一個之外的所有選項。 此外，您不應在if和else if塊中多次引用相同的元素 ( #namaServis )：

 function selectorView() { var namaEl = document.getElementById('namaServis'); while (namaEl.childNodes.length > 2) { // remove all option except the first namaEl.removeChild(namaEl.lastChild); } 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 option = document.createElement('option'); option.innerText = el; namaEl.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 option = document.createElement('option'); option.innerText = el; namaEl.appendChild(option); }); //console.log(jenisServis.length); } }

 <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>

Answer 3

在循環外定義options變量， map每個選項map到<option>${el}</option>並添加到options變量。 將options附加到namaServis元素。

function selectorView() {
    var namaServis = document.getElementById('namaServis');
    var jenisServis = document.getElementById('jenisServis').value;

    // Define options variable
    var options;

    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"];

        // map through the options
        teks.map(function (el) {

            // Concatenate each option to options variable
            options += `<option>${el}</option>`;
        });

        // Set the innerHTML
        namaServis.innerHTML = options;

    } else if (jenisServis == 'berat') {
        var teks = ["Pemeriksaan kebocoran klep", "Membersihkan ruang bakar & piston", "Skur Klep"];

         // map through the options
        teks.map(function (el) {

            // Concatenate each option to options variable
            options += `<option>${el}</option>`;
        });

        // Set the innerHTML
        namaServis.innerHTML = options;
    }
}