kintone UI Component を使っての動的ドロップダウンの増殖回避の方法について

大分類用のドロップダウンから動的に中分類のドロップダウンを作成するにあたり「kintone UI Component v0を使って動的ドロップダウンを作成しよう!」を参考に中分類のドロップダウンを動的に作成していますが、大分類用のドロップダウンのchangeイベント毎に増殖してしまいます。

回避方法を教えていただけませんでしょうか。

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

 

kintone.events.on(‘app.record.create.change.DropKey’, function (event) {

            var items = [];
            arrayB.forEach(function (value) {

                console.log(value);
                var item = { ‘label’: value, ‘value’: value };
                items.push(item);
            });

            var label = new kintoneUIComponent.Label({ text: ‘製品名’ });
            var dropdown = new kintoneUIComponent.Dropdown({ items: items });
            kintone.app.record.getSpaceElement(‘menu_space’).appendChild(label.render());
            kintone.app.record.getSpaceElement(‘menu_space’).appendChild(dropdown.render());
    
 });

以下の方法があると思います。

①要素にidを付与する処理を追加し、getElementById()で要素が取得できた場合はreturn eventして関数を終了させる
こちらが一般的な対応になると思います。現行バージョンではidを付与するプロパティが用意されていますが、v0ならelementにアクセスする必要があるようです(idの付与についてはこちらのスレッド、idがある場合に処理を終了させる記述はレコード一覧画面にボタンを置いてみよう!が参考になると思います)

②都度スペースのinnerHTMLを空にしてからappendChild()していく
方法としては可能ですが、工夫しないと選んでいたドロップダウンの選択肢も都度リセットされるので、現実的ではないかもしれません。こちらの方が役に立つ場面もあるので、方法として覚えておく程度で良いです。

mls-hashimoto様

お世話になります。

コメント頂きましてありがとうございました。

➁にのように一旦削除(空)してから実行するようにしましたが、現行UIはV0でしたのでV1ように書き換えたところ特別な処理なしに増殖しなくなりました。

原因はあまりスキルを持ち合わせていない為、不明なのですが結果オーライと言うことでV1で進めております。

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

 

mls-hashimoto様

お世話になります。

>現行UIはV0でしたのでV1ように書き換えたところ特別な処理なしに増殖しなくなりました。

とご報告させて頂きましたが、私の確認不足、勘違いのようでした、やはり増殖の対応策を組み込む必要がありました。

対応策としてinnerHTMLを空にするステップを組み込みました。

失礼いたしました。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。