# ドロップダウンの項目の選択によって他フォームの表示、非表示を切り替えたい

**URL:** <https://community.cybozu.dev/t/topic/12577>\
**Category:** kintone 開発相談\
**Created:** [2026 年 5 月 14 日午前 6:12 UTC](https://community.cybozu.dev/t/topic/12577 "2026-05-14T06:12:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoriakiTsukamoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/noriakitsukamoto/32/2551_2.png) [@NoriakiTsukamoto](https://community.cybozu.dev/u/NoriakiTsukamoto)\
**Post date:** [2026 年 5 月 14 日午前 6:12 UTC](https://community.cybozu.dev/t/topic/12577/1 "2026-05-14T06:12:29Z")

</div>

### 何を実現したいのか？

ドロップダウンの項目の選択によって他フォームの表示、非表示を切り替えたいです。

### 発生した問題やエラーメッセージ、確認したこと

このコミュニティの中にも[https://community.cybozu.dev/t/topic/1290/1などで同様の質問はあり、その対処方法が書かれているかと思いますが、その通りに記述しても意図した通りに動作せず、困っています。](https://community.cybozu.dev/t/topic/1290/1%E3%81%AA%E3%81%A9%E3%81%A7%E5%90%8C%E6%A7%98%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%AF%E3%81%82%E3%82%8A%E3%80%81%E3%81%9D%E3%81%AE%E5%AF%BE%E5%87%A6%E6%96%B9%E6%B3%95%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81%E3%81%9D%E3%81%AE%E9%80%9A%E3%82%8A%E3%81%AB%E8%A8%98%E8%BF%B0%E3%81%97%E3%81%A6%E3%82%82%E6%84%8F%E5%9B%B3%E3%81%97%E3%81%9F%E9%80%9A%E3%82%8A%E3%81%AB%E5%8B%95%E4%BD%9C%E3%81%9B%E3%81%9A%E3%80%81%E5%9B%B0%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

下記に実行したコードを載せます。

「affiliatedTeam」はルックアップにより入力される文字列(1行)です。  
レコード登録はASTERIAのkintone連携で実行する想定で、その際にルックアップと「affiliatedTeam」は入力される想定です。

問題は「bizCategoryA2Test2」(ドロップダウン)の変更をしたら、それに対応した項目(bizCategoryMeetingLUTest2など)を表示・非表示が切り替わるようにしたいのですが、そのとおりに動かないことです。  
現状ではドロップダウンを変更しても非表示のまま切り替わりません。

パターン1(if文を使用)、パターン2(Switch文を使用)で試し、パターン1のときはパターン2をコメントアウト…のように動作確認していますが、いずれの場合でも結果は変わりません。

途中で下記を挿入していますが、そもそもこれが表示されないため、項目変化のイベントを検知できてないんじゃないか？と疑っています。  
しかし、だとしてもなぜ検知できてないのかが分かりません。

```javascript
event.error = 'エラーです！';

```

JavaScriptおよびkintoneでのJavaScriptでのカスタマイズの経験が浅いため、知恵をお借りしたく思います。  
よろしくお願いします。

### 実行時の画像

 ![スクリーンショット 2026-05-14 150540](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/5/50d24206c43a87b1aea46688fab681a74ec6fb30.png)

※設定画面の画像の右にある項目を表示、非表示を切り替えたい。  
例えば、業務カテゴリで「展示会、WEBセミナー、研修」を選択した場合、業務カテゴリと一番右の文字列(1行)のみを表示させたい。  
しかし、選択しても文字列(1行)は出て来ない

### 実行したコード

```javascript
(function() {
    'use strict';
    // レコードの追加、編集、詳細画面で適用する
    const events = [
        'app.record.detail.show',
        'app.record.create.show',
        'app.record.edit.show',
        'app.record.create.change.affiliatedTeam',
        'app.record.edit.change.affiliatedTeam'
        ];

    kintone.events.on(events, (event) => {
    
        const record = event.record;
        
        // 所属チームの値を取得する
        const affiliatedTeam = record.affiliatedTeam.value;

        // 所属チームがAチームの場合、Aチーム向けのカテゴリを表示
        if (affiliatedTeam === "Aチーム") {
            kintone.app.record.setFieldShown('bizCategoryA2Test2', true);
        } else {
            kintone.app.record.setFieldShown('bizCategoryA2Test2', false);
        }

        if (affiliatedTeam === "Bチーム") {
            kintone.app.record.setFieldShown('bizCategoryB2Test2', true);
        } else {
            kintone.app.record.setFieldShown('bizCategoryB2Test2', false);
        }
        
        kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', false);
        kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', false);
        kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', false);
        kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', false);
        kintone.app.record.setFieldShown('bizCategorySemminerTest2', false);
        kintone.app.record.setFieldShown('resaleProviderTest2', false);

        return event;
    });

    const listChangeEvents = [
        'app.record.create.change.bizCategoryA2Test2',
        'app.record.edit.change.bizCategoryA2Test2'
        ];
    
    kintone.events.on(listChangeEvents, (event) => {
        event.error = 'エラーです！';

        const record = event.record;
        const bizCategoryA2Test2 = record.bizCategoryA2Test2.value;

        // パターン1、if文使用
        if (record['bizCategoryA2Test2'].value === "打合せ・相談(案件以外)") {
            kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', true);
            kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', true);
        } else {
            kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', false);
            kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', false);
        }

        if (record['bizCategoryA2Test2'].value === "業務改善、プロジェクト") {
            kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', true);
            kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', true);
        } else {
            kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', false);
            kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', false);
        }

        if (record['bizCategoryA2Test2'].value === "展示会、WEBセミナー、研修") {
            kintone.app.record.setFieldShown('bizCategorySemminerTest2', true);
        } else {
            kintone.app.record.setFieldShown('bizCategorySemminerTest2', false);
        }

        // パターン2、switch文使用
        switch (bizCategoryA2Test2) {
            case '打合せ・相談(案件以外)':
                kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', true);
                kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', true);
                kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', false);
                kintone.app.record.setFieldShown('bizCategorySemminerTest2', false);
                break;
            case '業務改善、プロジェクト':
                kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', true);
                kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', true);
                kintone.app.record.setFieldShown('bizCategorySemminerTest2', false);
                break;
            case '展示会、WEBセミナー、研修':
                kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', false);
                kintone.app.record.setFieldShown('bizCategorySemminerTest2', true);
                break;
            default:
                kintone.app.record.setFieldShown('bizCategoryMeetingLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryMeetingStrTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectLUTest2', false);
                kintone.app.record.setFieldShown('bizCategoryProjectStrTest2', false);
                kintone.app.record.setFieldShown('bizCategorySemminerTest2', false);
                break;
        }

        return event;
    });
})();

```

---

<div class="post-metadata">

**Author:** ![mls-hashimoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/mls-hashimoto/32/34_2.png) [@mls-hashimoto](https://community.cybozu.dev/u/mls-hashimoto)\
**Post date:** [2026 年 5 月 14 日午前 6:41 UTC](https://community.cybozu.dev/t/topic/12577/2 "2026-05-14T06:41:13Z")

</div>

```javascript
    kintone.events.on(events, (event) => {
    
        const record = event.record;
        
        // 所属チームの値を取得する
        const affiliatedTeam = record.affiliatedTeam.value;

```

↓

```javascript
    kintone.events.on(events, (event) => {
        const row = event.changes.row;
        
        // 所属チームの値を取得する
        const affiliatedTeam = row.affiliatedTeam.value;

```

画像を見る限りサブテーブル上のフィールドみたいなので、その場合はサブテーブル（配列）をループさせるか、event.changes.rowで変更を起こした行を取得するかが必要です。

[このあたり](https://cybozu.dev/ja/kintone/docs/js-api/events/event-object-actions/#record-create-get-the-object-of-the-edited-field-or-table-row)が参考になるかと思います。

老婆心ですが、おそらくこのまま実装しても理想の動作にはならないのではと思います。  
setFieldShownをサブテーブル上のフィールドに使用すると、その行だけでなく全ての行を非表示にします。  
もし行ごとに対応させたいのであればdisabledを変えるのが無難かと思います。

---

<div class="post-metadata">

**Author:** ![NoriakiTsukamoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/noriakitsukamoto/32/2551_2.png) [@NoriakiTsukamoto](https://community.cybozu.dev/u/NoriakiTsukamoto)\
**Post date:** [2026 年 5 月 14 日午前 6:54 UTC](https://community.cybozu.dev/t/topic/12577/3 "2026-05-14T06:54:51Z")

</div>

さっそくの回答ありがとうございます。  
まさかサブテーブル上で使ってることが問題になってるとは気付きませんでした。  
確かに考えてみたら、サブテーブルのある行は1項目、別の行は3項目…みたいな表示をkintoneで見たことがないです。

つまり、5行あったら5行すべてで対象の項目が表示・非表示で切り替わってしまう、ということですね。。。  
ですので表示はさせたままにして、入力の可否だけ切り替えると。

非常に参考になりました、ありがとうございます！

---

<div class="post-metadata">

**Author:** ![mls-hashimoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/mls-hashimoto/32/34_2.png) [@mls-hashimoto](https://community.cybozu.dev/u/mls-hashimoto)\
**Post date:** [2026 年 5 月 14 日午前 7:05 UTC](https://community.cybozu.dev/t/topic/12577/4 "2026-05-14T07:05:40Z")

</div>

```javascript
    kintone.events.on(events, (event) => {
    
        const record = event.record;
        
        // 所属チームの値を取得する
        const affiliatedTeam = record.affiliatedTeam.value;

```

↓

```javascript
    kintone.events.on(events, (event) => {
        const row = event.changes.row;
        
        // 所属チームの値を取得する
        const affiliatedTeam = row.value.affiliatedTeam.value;

```

画像を見る限りサブテーブル上のフィールドみたいなので、その場合はサブテーブル（配列）をループさせるか、event.changes.rowで変更を起こした行を取得するかが必要です。

[このあたり](https://cybozu.dev/ja/kintone/docs/js-api/events/event-object-actions/#record-create-get-the-object-of-the-edited-field-or-table-row)が参考になるかと思います。

老婆心ですが、おそらくこのまま実装しても理想の動作にはならないのではと思います。  
setFieldShownをサブテーブル上のフィールドに使用すると、その行だけでなく全ての行を非表示にします。  
もし行ごとに対応させたいのであればdisabledを変えるのが無難かと思います。

---

<div class="post-metadata">

**Author:** ![mls-hashimoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/mls-hashimoto/32/34_2.png) [@mls-hashimoto](https://community.cybozu.dev/u/mls-hashimoto)\
**Post date:** [2026 年 5 月 14 日午前 7:10 UTC](https://community.cybozu.dev/t/topic/12577/5 "2026-05-14T07:10:55Z")

</div>

ミスがあったので編集しようとしたら余分に投稿してしまいました。申し訳ありません。

```javascript
kintone.events.on(events, (event) => {
        const row = event.changes.row;
        
        // 所属チームの値を取得する
        const affiliatedTeam = row.affiliatedTeam.value;

```

↓

```javascript
kintone.events.on(events, (event) => {
        const row = event.changes.row;
        
        // 所属チームの値を取得する
        const affiliatedTeam = row.value.affiliatedTeam.value;

```

また、disabledを使ってこの方向で実装していく場合は、イベントを分ける必要があります。  
detail.show、create.show、edit.showではサブテーブルをループさせて行ごとに処理、changeイベントではevent.changes.rowを使用してその行だけ処理といった風にしていきます。

---

<div class="post-metadata">

**Author:** ![NoriakiTsukamoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/noriakitsukamoto/32/2551_2.png) [@NoriakiTsukamoto](https://community.cybozu.dev/u/NoriakiTsukamoto)\
**Post date:** [2026 年 5 月 14 日午前 9:31 UTC](https://community.cybozu.dev/t/topic/12577/6 "2026-05-14T09:31:26Z")

</div>

丁寧にありがとうございます！

おそらくサブテーブルの行数を取得して、その行数分ループ処理を行う。  
各ループごとに選択されているドロップダウンの項目にしたがって条件分岐…というイメージですかね。

どちらも実装したことがない処理なので自信はないですが、一旦それでやってみようと思います。

いろいろとありがとうございました！