新規投稿
フォローする

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

お世話になります!

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

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

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

0

5件のコメント

Avatar
juridon

こんにちは!

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

kintone UI Component v0を使って動的ドロップダウンを作成しよう!

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

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

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

0
Avatar
Riorio

juridon様

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

 

0
Avatar
juridon

こんにちは!

{label'東京', value'東京'},

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

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

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

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

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

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

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

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


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

0
Avatar
Riorio

juridon

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

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

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

 

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

という形です。

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

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

思っております。

0
Avatar
juridon

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

それなら、

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

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

「発送区分」の「変更」イベント
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#step4

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

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


0
サインインしてコメントを残してください。