# 選択されたドロップダウンの値により、他のドロップダウンの値を変更したい

**URL:** <https://community.cybozu.dev/t/topic/7035>\
**Category:** kintone 開発相談\
**Created:** [2021 年 3 月 19 日午前 6:55 UTC](https://community.cybozu.dev/t/topic/7035 "2021-03-19T06:55:53Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1087](https://avatars.discourse-cdn.com/v4/letter/l/db5fbb/32.png) [@Legacy\_Account1087](https://community.cybozu.dev/u/Legacy_Account1087)\
**Post date:** [2021 年 3 月 19 日午前 6:55 UTC](https://community.cybozu.dev/t/topic/7035/1 "2021-03-19T06:55:53Z")

</div>

お世話になります！

いろいろ記事を見てみたのですが、わからないので質問させてください。

現在、ドロップダウン１にA、B、Cと値があるとします。ドロップダウン2にX,Y,Z。

ドロップダウン1のAを選択したときに、ドロップダウン２にあるXを選択できるとありがたいのですが、ドロップダウンの取り扱いが始めてなのでご教授いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2021 年 3 月 22 日午前 1:47 UTC](https://community.cybozu.dev/t/topic/7035/2 "2021-03-22T01:47:07Z")

</div>

こんにちは！

kintone UI Component v1 がすでにでていますが、

[kintone UI Component v0を使って動的ドロップダウンを作成しよう！](https://community.cybozu.dev/hc/ja/articles/360014149732-kintone-UI-Component-v0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%8B%95%E7%9A%84%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86-)

こちらの記事参考になると思います。

新しいバージョンの方のドロップダウンの使い方は↓です。  
[https://kintone-ui-component.netlify.app/docs/components/desktop/dropdown](https://kintone-ui-component.netlify.app/docs/components/desktop/dropdown)

分からない部分のコードなどを書いていただくと答えやすくなりますので、是非チャレンジしてみてください＾0＾！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1087](https://avatars.discourse-cdn.com/v4/letter/l/db5fbb/32.png) [@Legacy\_Account1087](https://community.cybozu.dev/u/Legacy_Account1087)\
**Post date:** [2021 年 3 月 23 日午前 2:59 UTC](https://community.cybozu.dev/t/topic/7035/3 "2021-03-23T02:59:25Z")

</div>

[juridon様](https://community.cybozu.dev/hc/ja/profiles/376177001012-juridon)

ご連絡ありがとうございます！

下記が参照の抜粋になりますが、こちらを確認する限り

{text: ‘都道府県’}というのがドロップダウン1に対するものかと思われますが

その認識でよいでしょうか？

そうすると{label: ‘茨城’, value: ‘茨城’},

はlabelがドロップダウン1のAでvalueがドロップダウン2のX

と例えるのと同じことなのでしょうか？

そうした場合、ドロップダウン2を指定する

フィールドコード入力部分がこのJSにはないと思うのですが

サンプルを見る限り、動作は都道府県フィールドが二つ存在しているので

フィールドコードが二つあり、入力部分も二つあるんじゃないかと思っていたのですが

見る限り都道府県というフィールドコードは一つのみです。

&nbsp;

それとも一旦、下記のパターンはドロップダウンをサンプル画面のように

表示されるところまでで、それを他のドロップダウンフィールドに反映させるのは

別の工程がいるということでしょうか？

恐れ入りますが、教えて頂けますと幸いです。よろしくお願いいたします。

&nbsp;

| (function() { |  
| &nbsp; | ‘use strict’; |  
| &nbsp; | &nbsp; |  
| &nbsp; | kintone.events.on([‘app.record.create.show’, ‘app.record.edit.show’], function(event) { |  
| &nbsp; | var label = new kintoneUIComponent.Label({text: ‘都道府県’}); |  
| &nbsp; | var dropdown = new kintoneUIComponent.Dropdown({items: [ |  
| &nbsp; | {label: ‘東京’, value: ‘東京’}, |  
| &nbsp; | {label: ‘茨城’, value: ‘茨城’}, |  
| &nbsp; | {label: ‘栃木’, value: ‘栃木’}, |  
| &nbsp; | {label: ‘群馬’, value: ‘群馬’}, |  
| &nbsp; | {label: ‘埼玉’, value: ‘埼玉’}, |  
| &nbsp; | {label: ‘千葉’, value: ‘千葉’}, |  
| &nbsp; | {label: ‘神奈川’, value: ‘神奈川’} |  
| &nbsp; | ]}); |  
| &nbsp; | &nbsp; |  
| &nbsp; | kintone.app.record.getSpaceElement(‘space’).appendChild(label.render()); |  
| &nbsp; | kintone.app.record.getSpaceElement(‘space’).appendChild(dropdown.render()); |  
| &nbsp; | &nbsp; |  
| &nbsp; | dropdown.on(‘change’, function(value) { |  
| &nbsp; | var record = kintone.app.record.get(); |  
| &nbsp; | record.record.都道府県.value = value; |  
| &nbsp; | kintone.app.record.set(record); |  
| &nbsp; | }); |  
| &nbsp; | }); |  
| &nbsp; | })(); |

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2021 年 3 月 23 日午前 3:29 UTC](https://community.cybozu.dev/t/topic/7035/4 "2021-03-23T03:29:52Z")

</div>

こんにちは！

{label:&nbsp;‘東京’,&nbsp;value:&nbsp;‘東京’},

labelとvalueの違い、わかりにくいですよね💦

labelは画面に表示される文字 で、  
valueは内部的に持っている値  
です。

そして、参考ページの方、ただの動的ドロップダウンの説明記事でしたね。申し訳ありません💦

プログラミングの流れとしては、  
2つのドロップダウンを作成して、  
1つは選択肢（例えば地域）を選べるようにしておき、  
もう1つは選択肢（例えば都道府県）が空っぽのドロップダウンボックスを作成しておきます。

1つ目のドロップダウンで地域（関東、東海など）を選択したら  
2つ目のドロップダウンに選択肢をセットします。

↓例えば地域を選んだら都道府県の候補が並ぶみたいなドロップダウンを作りたい場合は、こんな流れになると思います。

//ドロップダウンを作成するときに2つ作成する  
var dropdown1&nbsp;= new kintoneUIComponent.Dropdown({items: [{label:“関東”, value:“関東”}, ・・・・]})// ←地域  
var dropdown2&nbsp;= new kintoneUIComponent.Dropdown({items: []});//←からっぽ

// 1つめのドロップダウン選択したら、選択された値によって2つ目のドロップダウンの中身を変更する  
dropdown1.on(‘change’, function(value) {  
&nbsp; if(value === “九州”){//1つ目のドロップダウンで九州が選択されていたら、2つ目のドロップダウンに九州の県をセットする  
&nbsp; &nbsp; dropdown2.items=[{label:“大分”, value:“大分”}, ・・・ その他九州の県];  
&nbsp; }else if (value===“関東”){  
&nbsp; &nbsp; dropdown2.items = [～関東の都県～];  
&nbsp; }else if(関西だったら～){  
&nbsp; &nbsp; ～～～  
&nbsp; };  
});

※kintone UI Component v1 にバージョンアップしていますので、  
↓こっちを使ったほうがいいかもですが,丁度いいサンプル記事が見つからず (\>\<).｡oO(後で試してみたいと思います・・・)  
[https://kintone-ui-component.netlify.app/docs/components/desktop/dropdown](https://kintone-ui-component.netlify.app/docs/components/desktop/dropdown)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1087](https://avatars.discourse-cdn.com/v4/letter/l/db5fbb/32.png) [@Legacy\_Account1087](https://community.cybozu.dev/u/Legacy_Account1087)\
**Post date:** [2021 年 3 月 23 日午前 3:56 UTC](https://community.cybozu.dev/t/topic/7035/5 "2021-03-23T03:56:06Z")

</div>

[juridon](https://community.cybozu.dev/hc/ja/profiles/376177001012-juridon)様

ご連絡、誠にありがとうございます。

具体的な連動方法といたしまして

こちらの9999が選択されたときに

&nbsp;

こちらの店舗受取を選択したい。

という形です。

片方が空っぽだと困る部分が出るので、今のまま手動でも構わないのですが

入力ミスが出ると不便だと思い、できれば9999＝店頭受取の連動だけさせておければと

思っております。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2021 年 3 月 24 日午前 4:59 UTC](https://community.cybozu.dev/t/topic/7035/6 "2021-03-24T04:59:00Z")

</div>

ドロップダウンフィールドを使うのですね！

それなら、

発想区分のドロップダウンが変更されたときに、  
変更した内容が9999なら、  
配送方法を「店頭受取」にする

というコードを書けば大丈夫そうですね

「発送区分」の「変更」イベント  
[https://developer.cybozu.io/hc/ja/articles/201941984#step3](https://developer.cybozu.io/hc/ja/articles/201941984#step3)  
[https://developer.cybozu.io/hc/ja/articles/202166270#step3](https://developer.cybozu.io/hc/ja/articles/202166270#step3)

の中で

フィールドの値を書き換える  
[https://developer.cybozu.io/hc/ja/articles/202166270#step4](https://developer.cybozu.io/hc/ja/articles/202166270#step4)

をやると大丈夫だと思います。

実際に書くコードは↑のフィールドの値を書き換えるところのサンプルと、  
↓のサンプルをあわせる感じが近いかと思います。  
[https://developer.cybozu.io/hc/ja/articles/360015637072](https://developer.cybozu.io/hc/ja/articles/360015637072)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account134](https://avatars.discourse-cdn.com/v4/letter/l/f6c823/32.png) [@Legacy\_Account134](https://community.cybozu.dev/u/Legacy_Account134)\
**Post date:** [2023 年 1 月 19 日午前 5:38 UTC](https://community.cybozu.dev/t/topic/7035/7 "2023-01-19T05:38:17Z")

</div>

お世話になっております。

詳細画面でkintoneシステムのデフォルトドロップダウンに  
ファルドコードを使って値を設定することが可能でしょうか。  
可能であれば、参考のコードを教えて頂きたいです。  
初心者です。お願いいたします。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2023 年 1 月 19 日午前 6:51 UTC](https://community.cybozu.dev/t/topic/7035/8 "2023-01-19T06:51:24Z")

</div>

12557507621273

初めまして。私はお世話をする人ではありません💦💦

「詳細画面でkintoneシステムのデフォルトドロップダウンに  
ファルドコードを使って値を設定することが可能でしょうか。」

これは・・・一体何をしたいのか分かりません！

デフォルトのドロップダウンを連携させたいのだったら、できません💦💦

なんらかのタイミングでドロップダウンの値を変更したいということならできますが、  
もしその場合はチュートリアルレベルの話なのでチュートリアルをやりましょう！

[https://developer.cybozu.io/hc/ja/articles/360024370392](https://developer.cybozu.io/hc/ja/articles/360024370392)

↑を全部終わらせたら、学んだ知識を応用してできるかもしれません。

&nbsp;

私の考え方は  
「初心者の方こそ、サンプルコードほいほいってあげるとそのままコピペして学びにならない」ですので、  
とくに「初心者です」の人にはコードは貼り付けないようにしています。  
チュートリアルをやってください。

チュートリアルを一通りやって、ご自分で挑戦して、  
それから書いてみたコードを貼り付けて質問するようにしたほうがよいと思います。

↓カスタマイズの無料勉強会イベントがたまに開催されているのでそこで勉強するのもありと思います

imoniCamp  
[https://page.cybozu.co.jp/-/mokumoku-imonicamp](https://page.cybozu.co.jp/-/mokumoku-imonicamp)

devCamp  
[https://page.cybozu.co.jp/-/kintone-devcamp-stepup](https://page.cybozu.co.jp/-/kintone-devcamp-stepup)

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account134](https://avatars.discourse-cdn.com/v4/letter/l/f6c823/32.png) [@Legacy\_Account134](https://community.cybozu.dev/u/Legacy_Account134)\
**Post date:** [2023 年 1 月 20 日午前 2:10 UTC](https://community.cybozu.dev/t/topic/7035/9 "2023-01-20T02:10:23Z")

</div>

[juridon](https://community.cybozu.dev/hc/ja/profiles/376177001012-juridon)  
お世話になります。

kintoneシステムについての初心者です。  
jsはすこしわかります。  
丁寧にご回答して頂いてありがとうございます。

「詳細画面でkintoneシステムのデフォルトドロップダウンに  
ファルドコードを使って値を設定することが可能でしょうか。」  
上記のことですが、やりたいのは  
詳細画面を開くとき、kintoneのデフォルトドロップダウンに  
別画面であるマスタからレコードを表示したいです。

例えば、  
画面A、画面Bがありまして  
画面Ａの詳細画面を開くと、画面Ｂからデータを使って  
ドロップダウンに表示したいです。  
参考になれるコードを教えていただけますでしょうか。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account980](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@Legacy\_Account980](https://community.cybozu.dev/u/Legacy_Account980)\
**Post date:** [2023 年 1 月 20 日午前 3:32 UTC](https://community.cybozu.dev/t/topic/7035/10 "2023-01-20T03:32:11Z")

</div>

12557507621273

デフォルトドロップダウンでは絞り込みできないです。  
（無理やりやればできないこともないかもしれないですがそこは力を入れるところではない）

ので、  
ドロップダウンの絞り込みができるプラグインを探すか、  
kintone UI Componentでカスタマイズをするかかなぁと思います。

というか、

チュートリアルを全部やって理解して実装できるなら、  
このスレッドの上の方ですでに答えてあることで十分実装できるので挑戦してみてください。

以上です。

---

<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:** [2023 年 12 月 6 日午前 5:20 UTC](https://community.cybozu.dev/t/topic/7035/11 "2023-12-06T05:20:36Z")

</div>

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