1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

kintoneでドロップダウンリストの選択肢を変更する

Posted at

kintoneにはドロップダウンリストがありますが,あるテキスト情報(今回は住所)を設定したら,分類を自動的に設定したいという要望が上がりました.色々方法はありますが,今回は分類をドロップダウンリストで作成し,テキスト情報が変更されたら対応する選択肢を自動で選択状態にする機能を作成しました.

前提条件

  • 「住所」フィールド(文字列),「住所2」フィールド(文字列)に登録された住所を取得し,「地域」フィールド(ドロップダウンリスト)の選択肢を変更します
  • 今回は地域マスタはプログラム内の変数とします

フォームを作成

kintoneで下記のフォームを作成します.
住所フォーム.PNG

また,地域ドロップダウンリストの中身はこちら.
ドロップダウンリスト内容.PNG

なお,郵便番号から住所を取得する部分は今回は省略します.

住所が登録されたら地域を自動設定するJavascript

autoset_area.js
// 20210402 S地域自動設定
// 1.住所が登録されたら,地域を自動的に設定します

(function() {
  // 住所が入っているフィールド名
  const ADDRESS_FIELD_NAME = '住所';

  // 住所2が入っているフィールド名
  const ADDRESS2_FIELD_NAME = '住所2';

  // 地域が入っているフィールド名(ドロップダウン)
  const AREA_FIELD_NAME = '地域';

  // 地域のリスト(今回はDBは使わずに対応)
  const AREA_LIST = ['静岡市駿河区','静岡市葵区','静岡市清水区','その他中部地区','その他西部地区','その他東部地区','県外','国外'];

  // 地域ごとの選択肢(今回はDBは使わずに対応)
  const AREA_SUB_LIST =   [
    ['静岡市駿河区'],
    ['静岡市葵区'],
    ['静岡市清水区'],
    ['焼津市', '藤枝市', '島田市', '牧之原市', '榛原郡'],
    ['浜松市', '磐田市', '袋井市', '掛川市', '湖西市', '御前崎市', '菊川市', '周智郡森町'],
    ['沼津市', '三島市', '熱海市', '富士宮市', '伊東市', '富士市', '御殿場市', '下田市', '裾野市',
      '伊豆市', '伊豆の国市', '賀茂郡', '田方郡', '駿東郡'],
    ['北海道', '大阪府', '京都府', '東京都', ''],
    ['']
  ];

  "use strict";

	// レコード詳細表示
	kintone.events.on(['app.record.detail.show', 'app.record.edit.change.住所', 'app.record.create.change.住所',
  'app.record.edit.change.住所2', 'app.record.create.change.住所2'], function (event) {
    // 住所の文字列を取得(番地まで)
    var address_name = event.record[ADDRESS_FIELD_NAME].value + event.record[ADDRESS2_FIELD_NAME].value;

    // マッチングフラグ(いずれかの地域にマッチしたら1をセットしてループを抜ける)
    let set_flag = 0;
    // 地域でループを回す
    for(let i=0; i<AREA_LIST.length; i++){
      for(let j=0; j<AREA_SUB_LIST[i].length; j++){
        if( address_name.indexOf(AREA_SUB_LIST[i][j]) > -1 ){
          // マッチする地域が見つかったので,ドロップダウンリストを設定
          event.record[AREA_FIELD_NAME].value = AREA_LIST[i];
          // フラグを立ててループを抜ける
          set_flag = 1;
          break;
        }
      }
      // フラグが立っていたらループを抜ける
      if( set_flag === 1 ) break;
    }

    return event;
  });

})();

今後の課題

とりあえず住所が登録されたら自動でドロップダウンリストが選択されるようになりました.
次は,

  • あり得ない住所が登録された時にドロップダウンリストの中身をクリアする
  • マッチングのためのマスタ(地域およびそれに含まれる市町のリスト)をDBにする

にチャレンジしてみたいと思います.

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?