【Kintone】レコード一覧画面に置いた動的ドロップダウンが使用するたびに増える

お世話になっております。

レコード一覧画面に複数のドロップダウンを配置し、

ドロップダウンAの内容によって、ドロップダウンBの絞り込みを行いたいのですが、

ドロップダウンAを変更するたびに、ドロップダウンBが増えていってしまいます。

イメージは以下の通りです。

ドロップダウンAで選択を行う毎に(内容は都度違うもの)

 

ドロップダウンBが増えてしまいます

 

ドロップダウンBに関する一部分のソースコードを以下に記載します。

function createDropDown2(records) {
 var select2 = document.createElement('select');
 select2.id = "select2";
 var fields2 = [];

 for (var i = 0; i < records.length; i++) {
  var option2 = document.createElement('option');
var record = records[i];

if(changedSelect === "7 : サポータ請求"){
   fields2 = record['SP_CD'].value + " : " + record['SP_NAME'].value;
}else{
fields2 = record['TH_CD'].value + " : " + record['TH_NAME'].value;
}
  option2.setAttribute('value', fields2); // optionのvalueを設定
option2.innerHTML = fields2; // optionの表示名を設定
select2.appendChild(option2); // selectにoptionを設定
}
 kintone.app.getHeaderSpaceElement().appendChild(select2); //ドロップダウンB追加
}

 

ドロップダウンB追加の前に

kintone.app.getHeaderSpaceElement(option2).innerHTML = "";

のように中身を消したりと試してみたのですが、

ドロップダウンAが消え、ドロップダウンBが残るといったことが起きており躓いております。

ドロップダウンAを消さず、またドロップダウンBを増やすことなく絞り込みを行うには、どのようにしたらよいでしょうか。

 

何かしらアドバイス等いただけますと幸いです。

よろしくお願いいたします。

こちらの増殖バグにあたるものではないでしょうか?
参考になるかと思います

K-OKZさん

早急な返信に感謝しております。

教えていただいたリンク先ですがすでに試しており

こちらは、ドロップダウンAは消えないのですが

ドロップダウンAを変更しても、ドロップダウンBが更新されず、絞り込みが機能しない

といった状況になります。

遅くなってしまいました、上記の関数をAの実行時に毎回呼び出しているのであれば毎回ドロップダウンBが追加されています。
流れとしては、ボタン配置と内容の処理を分けるといいかと思います。

K-OKZさん

返信ありがとうございます。

ご指摘の通り、ドロップダウンAを変更した際に呼び出しているので、

毎回ドロップダウンBが追加されています。

 

上記ソースの頭に、

ドロップダウンBに情報が入っている場合は

削除する処理を入れることで増え続けることがなくなりました。

var elmSelect = document.getElementById('select2');
if(elmSelect !== null){
 elmSelect.parentNode.removeChild(elmSelect);
}

 

ご指摘ありがとうございました。

無事解決いたしました。