kintone（キントーン）のドロップダウン間で値を連動させる方法とは？無料のプラグインで絞り込みできる

2024 6/04

2024.06.04

kintone（キントーン）のドロップダウン間で値を連動させる方法とは？無料のプラグインで絞り込みできる

「kintoneでドロップダウンでデータの絞り込みする方法はありますか？」
「kintoneのドロップダウン間を連動させる方法が知りたいです」
上記のようなお悩みをお持ちではないでしょうか？

kintoneでは、プラグインはもちろん、JavaScriptでもドロップダウン間でデータを連動させることができます。

しかしどのプラグインを使うべきか、どのように連動させるのか困ったことがあるのではないのでしょうか。

本記事では、無料で使えるプラグインはもちろん、有料のドロップダウン系プラグインに関しても詳しく解説します。

もしkintoneの特徴やできることについて詳細を知りたい方は下記の記事もあわせてご覧ください。

また、ペパコミ株式会社では、kintoneの導入サポートを無料で行っております。導入に関することから改修内製化までの相談ができるため、業務をより効率的に行えるようサポートしてくれるでしょう。

kintone（キントーン）のドロップダウン絞り込みプラグインとは

kintoneのドロップダウン絞り込みプラグインとは、複数のドロップダウンの選択肢を分類分けし、絞り込みながら値の選択ができるプラグインです。

kintoneの標準機能では大分類、中分類とドロップダウンを作成してもドロップダウン間の関連性をもたせることができないため、プラグインを使用することによって、分類で絞り込まれた選択肢だけをドロップダウンに表示ができるようになります。

kintone（キントーン）のドロップダウン間で値を連動させる方法【無料】

これまで、kintoneのドロップダウン絞り込みプラグインを紹介しました。

本項では、無料でドロップダウン間で値を連動させる以下の3つの方法を解説していきます。

JavaScriptでプルダウン連動を実装
jQueryでプルダウン連動を実装
項目選択フィールド連動各種設定プラグインを導入

JavaScriptでプルダウン連動を実装

参考：logo.js

JavaScriptを使ってプルダウン連動を実装する方法を紹介します。
以下は参考コードになりますので、自社の実現したい機能に合わせてカスタマイズして使用することをおすすめします。

まずは、初めにHTMLで2つのプルダウンメニューを作成します。

<select name=”prefecture”>
<option value=””>選択してください
<option value=”0″>東京都
<option value=”1″>大阪府
<option value=”2″>京都府
<option value=”3″>愛知県
</select>

<select name=”prefecture”>
<option value=””>選択してください
<option value=”0″>東京都
<option value=”1″ selected>大阪府
<option value=”2″>京都府
<option value=”3″>愛知県
</select>

次にJavaScriptでプルダウン連動を実装します。
var array = new Array();
array[”] = new Array({cd:”0″, label:”選択してください”});
array[“tokyo”] = new Array(
{cd:”1″, label:”世田谷区”},
{cd:”2″, label:”練馬区”},
{cd:”3″, label:”太田区”},
{cd:”4″, label:”足立区”},
{cd:”5″, label:”江戸川区”}
);
array[“osaka”] = [
{cd:”1″, label:”大阪市”},
{cd:”2″, label:”堺市”},
{cd:”3″, label:”東大阪市”},
{cd:”4″, label:”枚方市”},
{cd:”5″, label:”豊中市”}
];
array[“kyoto”] = [
{cd:”1″, label:”京都市”},
{cd:”2″, label:”宇治市”},
{cd:”3″, label:”亀岡市”},
{cd:”4″, label:”舞鶴市”},
{cd:”5″, label:”城陽市”}
];
array[“aichi”] = [
{cd:”1″, label:”名古屋市”},
{cd:”2″, label:”豊田市”},
{cd:”3″, label:”一宮市”},
{cd:”4″, label:”豊橋市”},
{cd:”5″, label:”岡崎市”}
];

document.getElementById(‘prefecture’).onchange = function(){
city = document.getElementById(“city”);
city.options.length = 0
var changedPref = prefecture.value;
for (let i = 0; i < array[changedPref].length; i++) {
var op = document.createElement(“option”);
value = array[changedPref][i]
op.value = value.cd;
op.text = value.label;
city.appendChild(op);
}
}

jQueryでプルダウン連動を実装

jQueryでプルダウン連動を実装する方法もあります。jQueryは、JavaScriptのコードを使いやすくするためにまとめたもので、より少ない記述でプログラムの実行を可能にします。

以下は参考コードになりますので、自社の実現したい機能に合わせてカスタマイズして使用することをおすすめします。

jQueryのファイルをダウンロードするか、headの中で下記を呼び出すと利用が可能です。
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

今回は、HTMLの2つ目のselect要素の中に、プルダウンメニューのoption要素をすべて記述しています。

<select id=”prefecture”>
<option value=””>選択してください
<option value=”tokyo”>東京都
<option value=”osaka”>大阪府
<option value=”kyoto”>京都府
<option value=”aichi”>愛知県
</select>
<select id=”city”>
<option value=””>選択してください</option>
<option value=”世田谷区” data-val=”tokyo”>世田谷区</option>
<option value=”練馬区” data-val=”tokyo”>練馬区</option>
<option value=”太田区” data-val=”tokyo”>太田区</option>
<option value=”足立区” data-val=”tokyo”>足立区</option>
<option value=”江戸川区” data-val=”tokyo”>江戸川区</option>
<option value=”大阪市” data-val=”osaka”>大阪市</option>
<option value=”堺市” data-val=”osaka”>堺市</option>
<option value=”東大阪市” data-val=”osaka”>東大阪市</option>
<option value=”枚方市” data-val=”osaka”>枚方市</option>
<option value=”豊中市” data-val=”osaka”>豊中市</option>
<option value=”京都市” data-val=”kyoto”>京都市</option>
<option value=”宇治市” data-val=”kyoto”>宇治市</option>
<option value=”亀岡市” data-val=”kyoto”>亀岡市</option>
<option value=”舞鶴市” data-val=”kyoto”>舞鶴市</option>
<option value=”城陽市” data-val=”kyoto”>城陽市</option>
<option value=”名古屋市” data-val=”aichi”>名古屋市</option>
<option value=”豊田市” data-val=”aichi”>豊田市</option>
<option value=”一宮市” data-val=”aichi”>一宮市</option>
<option value=”豊橋市” data-val=”aichi”>豊橋市</option>
<option value=”岡崎市” data-val=”aichi”>岡崎市</option>
</select>

次にjQueryの記述を使って、プログラム部分を書きます。

var $city = $(‘select[id=”city”]’);
$(‘select[id=”prefecture”]’).change(function() {
var val1 = $(this).val();
$city.find(‘option’).each(function() {
var val2 = $(this).data(‘val’);
if (val1 === val2) {
$(this).show();
}else {
$(this).hide();
}
})
})

項目選択フィールド連動各種設定プラグインを導入

3つ目の方法としては、項目選択フィールド連動各種設定プラグインの導入が挙げられます。

ドロップダウン絞り込みプラグインは、kintoneアプリで複数のドロップダウンの選択肢を分類分けして絞り込みながら値の選択ができるプラグインです。

kintoneの標準機能では大分類、中分類とドロップダウンを作成してもドロップダウン間の関連性をもたせることができません。ドロップダウン絞り込みプラグインの利用により、分類で絞り込まれた選択肢だけをドロップダウンに表示が可能になります。

kintone（キントーン）のドロップダウンで選択した値を連動させ、次のドロップダウンを絞り込む方法【有料】

これまで、無料でkintoneのドロップダウン間で値を連動させる方法を紹介しました。

本項では、さらに多機能なドロップダウン間で値を連動させる以下の2つの有料プラグインを解説していきます。

rex0220
JOYZO

rex0220｜項目絞り込みプラグイン

画像引用元：STORES

STORESより提供されている項目絞り込みプラグインは、他アプリのデータにより、ドロップダウンの選択肢を絞り込むプラグインです。

項目絞り込みプラグインの主な機能は、以下の通りになります。

絞り込み対象項目を10セット各10項目指定可能。
絞り込み結果で選択肢がひとつで、自動選択。
サブテーブルの項目に設定可能。
参照先アプリ一覧画面で、抽出条件を指定。
一覧編集時、項目絞り込み対象項目を編集不可に設定
項目検証プラグイン（Ver.26 以降）連携
テーブル行複写プラグイン（Ver.3 以降）連携
計算式プラグイン（Ver.42 以降）連携
パソコン/モバイル対応

料金体系

プラン名	kintone1サイト
値段	110,000円（税込）

JOYZO｜ドロップダウン絞り込みプラグイン

画像引用元：JOYZO

JOYZOより提供されているドロップダウン絞り込みプラグインは、複数のドロップダウンの選択肢を分類分けして絞り込みながら値を選択ができるプラグインです。

ドロップダウン絞り込みプラグインの主な機能は、以下の通りになります。

ドロップダウンの選択肢を2段階or3段階に分類分けして絞り込みながら値を選択
1つのアプリに複数の絞り込みを設定可能
スマートフォンブラウザやスマートフォンkintoneアプリなどモバイルに対応
ゲストスペースにも対応

料金体系

プラン名	1プラグイン利用	プラグインパック3	プラグインパック使い放題
月額プラン（税込）	3,900円（税込）	7,800円	15,000円
年額プラン（税込）	42,900円	85,800円	165,000円