ドロップダウンで選択した値に連動して、次のドロップダウンの選択肢を絞り込む方法

はじめまして。
同じような質問がある中、大変申し訳ないのですが、
ご教授いただけると幸いです。

タイトル通りですが、kintoneアプリのフォームで登録をする際に
3つのドロップダウンを連動させ選択した値によって次のドロップダウンの選択肢を
絞り込みたいと考えています。

ネットで調べると下記URLのようなサンプル紹介のページはあったのですが、
kintoneのJavaScriptで書く際はどのようにするか、わからず質問させていただきました。

*-----------------------------------*
http://yoshinote.com/sample/jquery/hierselect/1.htm
*-----------------------------------*

おこがましいですが、サンプルのコードを記載いただければ助かります。
お手数ですが、宜しくお願い致します。

Naoさん

下記のページに kintone API を使ったサンプルコードが記載されています。

参考にしてはいかがでしょうか。

 

kintoneで大中小カテゴリーなど親子関係にあるプルダウンを実現するためのjavascript(マスタは他のアプリ)
https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055

ドロップダウンの値から関連するドロップダウンだけを選択可能にする
https://www.joyzo.co.jp/blog/271

 

また、有料ですが、ドロップダウン絞り込みプラグインもあります。

ドロップダウン絞り込みプラグイン
https://www.joyzo.co.jp/plugin/originalpulldown/

 

 

amuro様
コメントありがとうございます。
kintoneで大中小カテゴリーなど親子関係にあるプルダウンを実現するためのjavascript(マスタは他のアプリ)
https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055
上記を試そうと思っているのですが、

【カテゴリーマスタ】のフォームを下記で設定し、APP_NO(URL)の数字を1で設定
フォームタイプ|フィールド名|フィールドコード
ドロップダウン|大カテゴリ |MASTER_BIG_CATEGORY_NAME
ドロップダウン|中カテゴリ |MASTER_MIDDLE_CATEGORY_NAME
ドロップダウン|小カテゴリ |MASTER_SMALL_CATEGORY_NAME

【マスタアプリ】を読み込む(このJSを読込むアプリ)のフォームを下記で設定
フォームタイプ|フィールド名|フィールドコード
ドロップダウン|大 |BIG_CATEGORY_NAME
ドロップダウン|中 |MIDDLE_CATEGORY_NAME
ドロップダウン|小 |SMALL_CATEGORY_NAME

という認識で宜しいでしょうか?
初心者な為、初歩的な質問申し訳ございませんが、
ご教授いただければと思います。

**Nao**さん

APP_NO(URL)は、【カテゴリーマスタ】のAPPIDになります。

あとはご認識どおりかと思います。

amuro様

ご回答ありがとうございます。

こちら方法で挑戦してみます。

みなさま

はじめまして、こちらのjavascriptを利用して私もドロップダウンの選択肢を絞り込みたいと考えています。

初心者なので、初歩的な質問かもしれませんが、ご返信いただけると大変助かります。

Nao様の記載のとおりに設定しましたが、うまく行きません。

chromeのデバッグツールでは下記で止まっております。

var big_cat_selected = event[“record”][BIG_CATEGORY_NAME][“value”];

自分も同じところで躓きましたが、こちらの記事が参考になりました。

kintone UI Componentを使って動的ドロップダウンを作成しよう!
https://developer.cybozu.io/hc/ja/articles/360014149732

 

皆様

はじめまして

kintoneで大中小カテゴリーなど親子関係にあるプルダウンを実現するためのjavascript(マスタは他のアプリ)
https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055

上記のjavascriptが実装できたので共有します

用意するもの

アプリA(マスタアプリ) アプリB(ドロップダウン絞り込みアプリ)

フォームタイプ|フィールドコード   フォームタイプ   |フィールドコード

ドロップダウン|大カテゴリ   文字列1行            |大

ドロップダウン|中カテゴリ                                      文字列1行     |中

ドロップダウン|小カテゴリ   文字列1行     |小

                    スペースフィールド|my\_space\_field(要素ID)

javascriptはアプリBに組み込みます。アプリBにはjQueryも入れます

修正箇所は以下の通りです 

1行目

 var  MASTER\_CATEGORY\_APP\_NO=xx; // xxはアプリAのアプリID

248行目

KintoneRecordManager.prototype.appId = MASTER_CATEGORY_APP_NO;

250行目をコメントアウト

// KintoneRecordManager.prototype.query = MASTER_CATEGORY_QUERY;

262~281行目

KintoneRecordManager.prototype.getRecords = function(callback) {
    kintone.api(kintone.api.url('/k/v1/records',true), 'GET', {
        app: this.appId,
        query: this.query + (' order by レコード番号 asc limit ' + this.limit + ' offset ' + this.offset ) //order by,limit, offsetの順番じゃないとダメ!
}, (function(_this) {

             // 省略

})(this));

これで概ね実装できるかと思います。

 

 

こちらのドロップダウンの挙動に関しまして、2点質問させてください。
大-中-小 のドロップダウンは無事に表示されるようになりましたが、
①大を変更した際の、中、小の初期表示が正しく出せません。

例 (大を東北とした際の表示)
大 中 小
東北 青森県 秋田市

データ (大 中 小 有効フラグ 優先度)
東北 秋田県 秋田市 ON 5
東北 青森県 青森市 ON 6

②マスタの登録の際に、項目が離れてしまうとまとまらない
大 中 小
東北 秋田県 秋田市 ON 5
東北 青森県 青森市 ON 6
関東 東京 新宿区 ON 7
東北 秋田県 北秋田市 ON 8

上記のような状態ですと、
東北
関東
東北
のように表示されてしまいます。

 

※下記書き込みも拝見させてもらったのですが、解決に至りませんでした。

https://developer.cybozu.io/hc/ja/community/posts/360042799572

 

 

宜しくお願い致します。

みなさま

ドロップダウンの絞り込みは出来るようになったのですが、

レコードを保存しようとすると、

サンプルコードの229行目でエラーが発生している様で、

保存ができません。

みなさん保存できていますか?