# サブテーブル内にあるドロップダウンについて

**URL:** <https://community.cybozu.dev/t/topic/9331>\
**Category:** kintone 開発相談\
**Created:** [2024 年 7 月 27 日午前 4:48 UTC](https://community.cybozu.dev/t/topic/9331 "2024-07-27T04:48:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GeN](https://avatars.discourse-cdn.com/v4/letter/g/3da27b/32.png) [@GeN](https://community.cybozu.dev/u/GeN)\
**Post date:** [2024 年 7 月 27 日午前 4:48 UTC](https://community.cybozu.dev/t/topic/9331/1 "2024-07-27T04:48:58Z")

</div>

## 初質問投稿です。

### -前提-

フィールドコード「テーブル」というテーブルの中に、  
フィールドコード「フロア」というドロップダウンが設定してある。

「フロア」の選択肢は「1F」「2F」「3F」「4F」「5F」

### ♦実現したいこと

例えば、はじめに「1F」を選択して情報を入力した場合、  
その後、テーブルの行を追加した時に、「1F」を選べないようにしたい。

・物理的に押せなくする。  
もしくは  
・ドロップダウンの選択肢から消す。（理想）

上記のような動きをjavascriptでの制御で行いたいのですが、可能でしょうか。

### 

様々調べたのですが、活用できそうな文献が見当たりませんでした。  
当方、javascript初心者のため、このようにすればできるのではないか等、些細なアドバイスでも構いません。何か御助言いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![lemon\_sour](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/lemon_sour/32/1469_2.png) [@lemon\_sour](https://community.cybozu.dev/u/lemon_sour)\
**Post date:** [2024 年 7 月 28 日午前 2:48 UTC](https://community.cybozu.dev/t/topic/9331/2 "2024-07-28T02:48:46Z")

</div>

可能か、不可能かというと断定は出来ないが、可能そうだなと思いました。  
「kintone ドロップダウン 選択肢 取得」などでgoogle検索をすると参考になる記事は出てきます。  
また、とある生成AIにて上記条件を与えたところ以下のjavascriptが返ってきましたので参考にどうぞ。

時間的にコードの作成・検証まで手を出せておらず、申し訳ございません。

```javascript
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
    // 選択済みのフロアを格納する配列
    const selectedFloors = [];

    // テーブルの各行をループ
    const subTable = event.record["テーブル"]["value"];
    subTable.forEach(row => {
        if (row["フロア"]["value"]) {
            selectedFloors.push(row["フロア"]["value"]);
        }
    });

    // 行が追加された際の処理
    kintone.events.on(['app.record.index.edit.show'], event => {
        const subTable = event.record["テーブル"]["value"];
        const rowIndex = subTable.length - 1; // 最新の行のインデックス

        // ドロップダウンのフィールドコード
        const fieldCode = "フロア";

        // 選択済みのフロアをドロップダウンの選択肢から除外
        const options = kintone.getFieldElement(fieldCode).getOptions();
        options.forEach((option, index) => {
            if (selectedFloors.includes(option.value)) {
                options.splice(index, 1);
            }
        });
        kintone.setFieldElements([
            {
                name: fieldCode,
                value: options
            }
        ]);
    });

    return event;
});

```

---

<div class="post-metadata">

**Author:** ![GeN](https://avatars.discourse-cdn.com/v4/letter/g/3da27b/32.png) [@GeN](https://community.cybozu.dev/u/GeN)\
**Post date:** [2024 年 7 月 29 日午前 12:51 UTC](https://community.cybozu.dev/t/topic/9331/3 "2024-07-29T00:51:11Z")

</div>

返信頂き誠にありがとうございます！  
頂いたアドバイスをもとに調べてみます。

---

<div class="post-metadata">

**Author:** ![pomo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/pomo/32/465_2.png) [@pomo](https://community.cybozu.dev/u/pomo)\
**Post date:** [2024 年 7 月 30 日午前 4:57 UTC](https://community.cybozu.dev/t/topic/9331/4 "2024-07-30T04:57:43Z")

</div>

上記だと一覧の編集時の処理に途中からシフトしてるのとkintone.getFieldElement()存在しないのかなと思います。

恐らく作りとしては追加、編集時の各チェンジイベントで作用させるのがいいのかなと思います。  
ドロップダウンから重複階層を消す仕様にはしてないですが、重複した際にkintoneのエラーイベントで明示的に表示すると下記のような形でいけるかなと思います。

テーブルのフィールドコード→テーブル  
テーブル内のフロアのフィールドコード→フロア  
としてます。

```javascript
(function () {
    'use strict';
    // 選択済みのフロアを保持する配列
    let selectedFloors = [];

    // フロアの選択変更を検知するイベント
    kintone.events.on(['app.record.create.change.フロア', 'app.record.edit.change.フロア'], function (event) {
      var record = event.record;
      var changedRow = event.changes.row;
      var selectedFloor = changedRow.value.フロア.value;
      var previousFloor = event.changes.field.originalValue;

      // 前の値を選択済みフロアから削除
      if (previousFloor) {
        selectedFloors = selectedFloors.filter((floor) => floor !== previousFloor);
      }

      // 新しい値をチェック
      if (selectedFloor) {
        if (selectedFloors.includes(selectedFloor)) {
          // 重複エラー
          changedRow.value.フロア.error = 'このフロアは既に選択されています。別のフロアを選択してください。';
        } else {
          // エラーなし、選択済みフロアに追加
          selectedFloors.push(selectedFloor);
          changedRow.value.フロア.error = null;
        }
      } else {
        // 値がクリアされた場合
        changedRow.value.フロア.error = null;
      }

      return event;
    });

    // テーブルの変更を検知するイベント
    kintone.events.on(['app.record.create.change.テーブル', 'app.record.edit.change.テーブル'], function (event) {
      const record = event.record;
      const table = record.テーブル.value;

      // テーブル内の値を改めてselectedFloorに入れなおす
      selectedFloors = table.map((row) => row.value['フロア'].value).filter((value, index, self) => value && self.indexOf(value) === index);
      return event;
    });
  })();

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 8 月 7 日午前 1:49 UTC](https://community.cybozu.dev/t/topic/9331/5 "2024-08-07T01:49:56Z")

</div>

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