# ラジオボタンで選択後、ドロップダウンの選択絞り込み

**URL:** <https://community.cybozu.dev/t/topic/8827>\
**Category:** kintone 開発相談\
**Created:** [2024 年 3 月 19 日午前 4:24 UTC](https://community.cybozu.dev/t/topic/8827 "2024-03-19T04:24:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![muto](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@muto](https://community.cybozu.dev/u/muto)\
**Post date:** [2024 年 3 月 19 日午前 4:24 UTC](https://community.cybozu.dev/t/topic/8827/1 "2024-03-19T04:24:20Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/38f3a7890d1203e516bf9a5ea0cd6599a4416c49.png)

区分選択のラジオボタンが、“特殊”,“標準”,"商品"とあります。  
商品区分のドロップダウンは、“ACTS”,“ACSS”,“TGMEs”,“MDN”,“電源ターミナル”,"ガス発電"とあります。  
やりたいことは、区分選択で、"特殊"を選んだら、商品区分は、"ACTS"と"ACSS"だけ選べる様にして、  
区分選択で、"標準"を選んだら、商品区分は、"TGMEs"と"MDN"だけ選べる様にして、  
区分選択で、"商品"を選んだら、商品区分は、"電源ターミナル"と"ガス発電"だけ選べる様にしたい。

次のコードでは動かない

(() =\> {  
‘use strict’;

// レコード表示イベント  
const showEvents = [‘app.record.create.show’, ‘app.record.edit.show’];

kintone.events.on(showEvents, (event) =\> {  
const record = event.record;  
updateDropdownOptions(record);  
return event;  
});

// レコードの値が変更されたときのイベント  
const changeEvent = [  
‘app.record.create.change.区分選択’,  
‘app.record.edit.change.区分選択’  
];

kintone.events.on(changeEvent, (event) =\> {  
const record = event.record;  
updateDropdownOptions(record);  
return event;  
});

// ドロップダウンオプションを更新する関数  
function updateDropdownOptions(record) {  
const productCategoryField = ‘商品区分’;  
const dropdownFieldCode = ‘区分選択’;  
const dropdown = record[productCategoryField];  
const selectedCategory = record[dropdownFieldCode].value;  
dropdown.options = ; // 商品区分の選択肢を初期化

```
// 区分選択の値に応じて商品区分の選択肢を設定
switch (selectedCategory) {
  case '特殊':
    dropdown.options.push({label: 'ACTS', value: 'ACTS'});
    dropdown.options.push({label: 'ACSS', value: 'ACSS'});
    break;
  case '標準':
    dropdown.options.push({label: 'TGMEs', value: 'TGMEs'});
    dropdown.options.push({label: 'MDN', value: 'MDN'});
    break;
  case '商品':
    dropdown.options.push({label: '電源ターミナル', value: '電源ターミナル'});
    dropdown.options.push({label: 'ガス発電', value: 'ガス発電'});
    break;
  default:
    // 初期状態で何も選択されていない場合や、予期しない値の場合
    break;
}

// 現在の選択値が新しい選択肢に含まれていない場合、選択をクリア
if (!dropdown.options.some(option => option.value === dropdown.value)) {
  dropdown.value = '';
}

```

}  
})();

```javascript
どなたかアドバイスの程、宜しくお願いいたします。
```

---

<div class="post-metadata">

**Author:** ![ko\_ji](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/ko_ji/32/31_2.png) [@ko\_ji](https://community.cybozu.dev/u/ko_ji)\
**Post date:** [2024 年 3 月 19 日午前 4:46 UTC](https://community.cybozu.dev/t/topic/8827/2 "2024-03-19T04:46:32Z")

</div>

こんにちは。  
イベントオブジェクトでドロップダウンフィールドの選択肢は変更できないです。

ドロップダウンの選択肢を動的に変更したい場合、以下いずれかの処理を  
実装する必要があるかと思います。

- DOM操作を利用して、ドロップダウンの選択肢を非表示する

- kintone UI component を利用して、独自のドロップダウンを実装する

なお、DOM操作を利用する場合には、アップデートなどで要素の id や class が  
変更になることがあるので、kintone UI Component を利用するのがいいかなと思います。

kintone UI Component で動的なドロップダウンを実装する方法については、  
以下のページで紹介されているので、確認してみてください。

> **[kintone UI Component v1を使って動的ドロップダウンを作成しよう！](https://cybozu.dev/ja/kintone/tips/development/customize/validation-and-assistance/use-kintone-ui-component-v1-for-dynamic-dropdown/)**
>
> kintone UI Component v1を使って動的ドロップダウンを作成する方法ついて紹介します。

---

<div class="post-metadata">

**Author:** ![muto](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@muto](https://community.cybozu.dev/u/muto)\
**Post date:** [2024 年 3 月 25 日午前 2:06 UTC](https://community.cybozu.dev/t/topic/8827/3 "2024-03-25T02:06:24Z")

</div>

コメントありがとうございます。早速試してみます。

---

<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 年 5 月 31 日午前 5:21 UTC](https://community.cybozu.dev/t/topic/8827/4 "2024-05-31T05:21:46Z")

</div>

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