大項目・小項目で2段階ドロップダウンの作成をしたいと考えています。

何を実現したいのかを書きましょう

上記のように、大項目に設定した各項目に対して小項目が動的に選択できるものを作成しようと思っています。スペースに入れた小項目を文字列フィールドの小項目に入れる仕様にしています。

発生した問題やエラーメッセージを具体的に書きましょう

大項目にはkintone編集画面で項目設定しているので、プログラム関係なく
表示されているのですが小項目が反映されません。

実行したコードをコピー&ペーストしましょう

(function() {
‘use strict’;

kintone.events.on([
‘app.record.create.show’, ‘app.record.edit.show’
], () =>{
const spDropdown = kintone.app.record.getSpaceElement(“main”);

  const drBig = new Kuc.Dropdown({
    label: "大項目",
    visible: true,
    disabled: false,
  });

  spDropdown.appendChild(drBig);

  drBig.addEventListener("change", () => {
    const r1 = kintone.app.record.get();

    drMid.items = midOptions(e.target.value);
    // ドロップダウンで選択した値を文字列(1行)フィールドにコピー
    r1.record.大項目.value = drBig.value;
    kintone.app.record.set(r1);
  });
});

});

kintone.events.on([
‘app.record.create.change.大項目’, ‘app.record.edit.change.大項目’
], (event) => {

const drBig = document.getElementById('drBig');

// ドロップダウン大項目を選択したときのイベント
  switch (event.change.field.value) {
    case '購入仕様書':
      drBig.items = [{ value: '購入仕様書チェック' }, { value: '質問書作成' }];break;
    case '承認図作成':
      drBig.items = [{ value: '図面作成 CAD' }, { value:'図面作成 リスト'}, { value: '計算書作成' }];break;
    case '検図':
      drBig.items = [{ value: '検図 承認図、資料、全般' }, { value: '検図用資料作成'}];break;
    case '社内仕様書':
      drBig.items = [{ value: '社内仕様書作成' }];break;
    case '標準化':
      drBig.items = [{ value: '外形図作成' }, { value: '付属品作成'}, { value: 'STL作成'}, { value: 'G/T技術資料作成'}, { value: '仕様書など改訂作業'}];break;
case '操作':
      drBig.items = [{ value: 'KIDS手配' }, { value: '先送品入力'}, { value: 'WF入力'}, { value: '旅費精算など入力'}];break;
    case '依頼表作成':
      drBig.items = [{ value: '捩り振動検討依頼表作成' }, { value: '特殊条件調査票作成'}, { value: '設計連絡表作成'}, { value: '業務連絡表作成'}, { value: '技術連絡表作成'}];break;
    case '問い合わせ':
      drBig.items = [{ value: '客先問い合わせ対応' }, { value: '社内問い合わせ対応'}, { value: 'グループ内教育'}];break;
    case '会議':
      drBig.items = [{ value:'会議_社内 出席' }, { value: '会議_社内 準備'}, { value: '会議_社内 議事録'}, 
                     { value: '会議_客・メーカー 出席'}, { value: '会議_客・メーカー 準備'}, { value: '会議_客・メーカー 議事録'}];break;
    case '引合':
      drBig.items = [{ value: '引合見積書作成' }, { value: '引合見積図面 計算書作成'}, { value: '引合見積図面 CAD作成'}];break;
    case '不具合':
      drBig.items = [{ value: '問い合わせ回答' }, { value: 'メーカーやりとり'}];break;
    case 'その他':
      drBig.items = [{ value: '雑務' }];break;
      default:
      return [{value: ''}];
  }
});

noriさん

早速ありがとうございます。

現状、下記のように修正しました。
しかし添付のように大項目の枠が出るだけで選択肢が出てこず
ドロップダウンとして機能しません。

(function() {
‘use strict’;

kintone.events.on([
‘app.record.create.show’, ‘app.record.edit.show’
], (event) =>{
const spDropdown = kintone.app.record.getSpaceElement(“main”);

  const drBig = new Kuc.Dropdown({
    label: "大項目",
    visible: true,
    disabled: false,
  });

  spDropdown.appendChild(drBig);

return event;

});

kintone.events.on([
‘app.record.create.change.大項目’, ‘app.record.edit.change.大項目’
], (event) => {

const drBig = document.getElementById('drBig');

// ドロップダウン大項目を選択したときのイベント
  switch (event.change.field.value) {
    case '購入仕様書':
      drBig.items = [{ value: '購入仕様書チェック' }, { value: '質問書作成' }];break;
    case '承認図作成':
      drBig.items = [{ value: '図面作成 CAD' }, { value:'図面作成 リスト'}, { value: '計算書作成' }];break;
    case '検図':
      drBig.items = [{ value: '検図 承認図、資料、全般' }, { value: '検図用資料作成'}];break;
    case '社内仕様書':
      drBig.items = [{ value: '社内仕様書作成' }];break;
    case '標準化':
      drBig.items = [{ value: '外形図作成' }, { value: '付属品作成'}, { value: 'STL作成'}, { value: 'G/T技術資料作成'}, { value: '仕様書など改訂作業'}];break;
case '操作':
      drBig.items = [{ value: 'KIDS手配' }, { value: '先送品入力'}, { value: 'WF入力'}, { value: '旅費精算など入力'}];break;
    case '依頼表作成':
      drBig.items = [{ value: '捩り振動検討依頼表作成' }, { value: '特殊条件調査票作成'}, { value: '設計連絡表作成'}, { value: '業務連絡表作成'}, { value: '技術連絡表作成'}];break;
    case '問い合わせ':
      drBig.items = [{ value: '客先問い合わせ対応' }, { value: '社内問い合わせ対応'}, { value: 'グループ内教育'}];break;
    case '会議':
      drBig.items = [{ value:'会議_社内 出席' }, { value: '会議_社内 準備'}, { value: '会議_社内 議事録'}, 
                     { value: '会議_客・メーカー 出席'}, { value: '会議_客・メーカー 準備'}, { value: '会議_客・メーカー 議事録'}];break;
    case '引合':
      drBig.items = [{ value: '引合見積書作成' }, { value: '引合見積図面 計算書作成'}, { value: '引合見積図面 CAD作成'}];break;
    case '不具合':
      drBig.items = [{ value: '問い合わせ回答' }, { value: 'メーカーやりとり'}];break;
    case 'その他':
      drBig.items = [{ value: '雑務' }];break;
      default:

      drBig.addEventListener("change", () => {
        const r1 = kintone.app.record.get();

        drMid.items = midOptions(e.target.value);
        // ドロップダウンで選択した値を文字列(1行)フィールドにコピー
        r1.record.大項目.value = drBig.value;
        kintone.app.record.set(r1);
    });
      return event;
  }
});

})();