亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用onchange()清除select中的innerHTML選項?

如何使用onchange()清除select中的innerHTML選項?

溫溫醬 2023-09-18 10:35:30
我有兩個選擇下拉菜單。當我在第一個選擇下拉列表中選擇一個選項時,第二個選擇下拉列表中的選項將顯示取決于第一個下拉列表中所選的值。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/問題是,當我在第一個下拉列表中選擇一個選項時,然后選擇另一個選項,第二個下拉列表中的選項將重復。有人可以幫忙嗎?
查看完整描述

2 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

在附加新內容之前使用它來清除選擇中的選項

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


查看完整回答
反對 回復 2023-09-18
?
慕斯王

TA貢獻1864條經驗 獲得超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>


查看完整回答
反對 回復 2023-09-18
  • 2 回答
  • 0 關注
  • 114 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號