前回の記事 JavaScirptでセレクトをドリルダウン表示する のラジオボタンバージョンとなります。
JavaScriptソース
document.addEventListener('DOMContentLoaded', function() {
const drdowField = [
['f01','f02', { 1:[1,2,3], 2:[4,5,6], 3:[7,8,9] }],
['f02','f03', { 1:[1,2,3], 2:[4,5,6], 3:[7,8,9] }],
['f04','f05', { 1:[1,2,3], 2:[4,5,6], 3:[7,8,9] }],
['f05','f06', { 1:[1,2,3], 2:[4,5,6], 3:[7,8,9] }]
];
drdowField.forEach(([parentName, childName, optionsMap]) => {
const parentRadios = document.querySelectorAll(`input[name="${parentName}"]`);
parentRadios.forEach(radio => {
radio.addEventListener('change', () => {
updateChildOptions(childName, optionsMap[radio.value]);
});
});
updateChildOptions(childName, null); // 初期状態の設定
});
function updateChildOptions(childName, values) {
const childRadios = document.querySelectorAll(`input[name="${childName}"]`);
childRadios.forEach(radio => {
const label = radio.closest('.sp-form-selection');
if (label) {
if (values && values.includes(parseInt(radio.value))) {
label.style.display = '';
} else {
label.style.display = 'none';
}
}
});
}
});
使い方
SPIRALの設定例等は全て同じで
フォームを作成する際に全てラジオボタンで設定してください。
こちらの例では業種、職種、役職がf01やf02,f03に当たる項目になります。
その後JavaScriptタブにてソースの設定をしてください。
ソース内のドリルダウンの親子関係を指定するdrdowFieldの仕様はプルダウンのときと同じなので、前回の記事を確認してください。
