実現したいこと
この記事を参考に、kintone UI Component ver1.13.0を使ってkintoneの標準ドロップダウンの値に応じて動的ドロップダウンを作成しました。
動的ドロップダウンは作成できたのですが、「都道府県」の値が選択済み（県名が選択されている）のときの場合に「地方」を変更すると、「都道府県」の値は「-----」を選択させたいのに空欄になってしまいます。
ただ、「都道府県」の値が「-----」の時に「地方」を変更すると「都道府県」の値は「-----」が選択されます。
どこの記述を見直したらいいでしょうか。
自力では分からなかったためお知恵をお借りしたいです。
よろしくお願いいたします。
(() => {
"use strict";
const Kuc = Kucs['1.13.0'];
const prefectures = {
'北海道地方': ['北海道'],
'東北地方': ['青森', '岩手', '宮城', '秋田', '山形', '福島'],
'関東地方': ['東京', '茨城', '栃木', '群馬', '埼玉', '千葉', '神奈川'],
'中部地方': ['新潟', '富山', '石川', '福井', '山梨', '長野', '岐阜', '静岡', '愛知'],
'近畿地方': ['京都', '大阪', '三重', '滋賀', '兵庫', '奈良', '和歌山'],
'中国地方': ['鳥取', '島根', '岡山', '広島', '山口'],
'四国地方': ['徳島', '香川', '愛媛', '高知'],
'九州地方': ['福岡', '佐賀', '長崎', '大分', '熊本', '宮崎', '鹿児島', '沖縄']
};
const removeDropdownItems = (event, dropdown) => {
dropdown.value = '';
dropdown.selectedIndex = 0;
dropdown.items = [];
};
const setDropdownItems = (event, dropdown) => {
const key = event.record.地方.value;
if (!event.record.地方.value) {
dropdown.disabled = true;
return;
}
dropdown.items = [{ label: '-----', value: '' }];
// 選択肢を追加
prefectures [key].forEach((arr) => {
dropdown.items.push({
label: arr,
value: arr
});
});
// ドロップダウン初期値選択
dropdown.value = '';
dropdown.selectedIndex = 0;
dropdown.disabled = false;
};
let DROPDOWN;
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
// 空の都道府県ドロップダウンを作る
const dropdown = new Kuc.Dropdown({
label: '都道府県',
items: [],
disabled: true
});
kintone.app.record.setFieldShown('都道府県', false);
// スペースフィールドに都道府県ドロップダウンを設置
kintone.app.record.getSpaceElement('space').appendChild(dropdown);
// 都道府県ドロップダウンで選択した値を文字列1行フィールドにコピー
dropdown.addEventListener('change', (event) => {
const record = kintone.app.record.get();
record.record.都道府県.value = event.detail.value;
kintone.app.record.set(record);
});
// 都道府県ドロップダウンにアイテムリストをセット
setDropdownItems(event, dropdown);
// 都道府県文字列に値があればドロップダウンの初期値にセット
if (event.record.都道府県.value) {
dropdown.value = event.record.都道府県.value;
}
DROPDOWN = dropdown;
});
kintone.events.on(['app.record.create.change.地方', 'app.record.edit.change.地方'], (event) => {
removeDropdownItems(event, DROPDOWN);
setDropdownItems(event, DROPDOWN);
event.record.都道府県.value = '';
return event;
});
kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
const record = event.record;
if (!record.都道府県.value) {
event.error = '都道府県を選択してください';
}
return event;
});
})();