お世話になっております。井狩です。
早速ご質問させていただきます。
商品マスタと見積アプリがございます。
見積アプリでは商品マスタに登録されているカテゴリと商品をドロップダウンで選択します。(選択したカテゴリによって選べる商品は動的に変化するようにjsで作成しています。)
そして商品を選択した際に商品に紐づく商品コードをテキストにセットしたいと考えているのですが、方法をお教え願いますでしょうか。
ドロップダウンは以下のようなjsで作成しております。
(function() {
“use strict”;
/* 業界/業種マスタのIDをFirstCategoryIDと定義 */
var FirstCategoryId = 1716;
// var FirstCategoryId = 1380;
/* 画面作成時のボタン押下時の処理 */
kintone.events.on('app.record.create.submit', function(event) {
// IDのvalueを取得
var record = event.record;
record['txt_industry']['value'] = document.getElementById('cybozu_first_category').value; //業界業種アプリの業界フィールド
record['txt_category']['value'] = document.getElementById('cybozu_second_category').value; ////業界業種アプリの業種フィールド
return event;
});
/* 編集時のボタン押下時の処理 */
kintone.events.on('app.record.edit.submit', function(event) {
// IDのvalueを取得
var record = event.record;
record['txt_industry']['value'] = document.getElementById('cybozu_first_category').value;
record['txt_category']['value'] = document.getElementById('cybozu_second_category').value;
return event;
});
/* 新規作成画面表示時の処理 */
kintone.events.on('app.record.create.show', function(event) {
/* ドロップダウンリスト作成関数呼び出し */
createDropdown();
// 新規作成画面表示時に非表示にしたいフィールド
//kintone.app.record.setFieldShown('txt_industry', false);
//kintone.app.record.setFieldShown('txt_category', false);
return event;
});
/* 確認画面表示時の処理 */
kintone.events.on('app.record.detail.show', function(event) {
// テキスト作成関数呼び出し
createText();
// 確認画面表示時に非表示にしたいフィールド
//kintone.app.record.setFieldShown('txt_industry', false);
//kintone.app.record.setFieldShown('txt_category', false);
});
/* 編集画面表示時の処理 */
kintone.events.on('app.record.edit.show', function(event) {
createDropdown();
// 編集画面表示時に非表示にしたいフィールド
//kintone.app.record.setFieldShown('txt_industry', false);
//kintone.app.record.setFieldShown('txt_category', false);
return event;
});
/* createDropdownのfunctionの定義 */
function createDropdown() {
// select1を作成
var select1 = document.createElement('select');
// 名前をファーストカテゴリー
select1.setAttribute('name', 'first_category');
// IDの名前
select1.setAttribute('id', 'cybozu_first_category');
// コンボボックスを変えたら、secondCategoryに連動する。
select1.addEventListener('change', function() {
// ファーストカテゴリの仕組み、大分類
changeSecondCategory(this.value)
});
/* ページからIDをゲットしてファンクションに返す記述 */
kintone.api('/k/v1/records', 'GET', {app:FirstCategoryId,query:"order by 作成日時 asc"}, function(resp) {
var records = resp.records;
// エリアマスタから取得した情報をテキストに追加
for (var i = 0; i < records.length; i++) {
var txt = document.createTextNode(records[i]['txt_industry']['value']); //業界業種マスタの業界フィールド
var option = document.createElement('option');
option.appendChild(txt);
option.setAttribute('value', records[i]['txt_industry']['value']); //業界業種マスタの業種フィールド
select1.appendChild(option);
}
/* 編集の場合はレコード情報を読み込んで該当のoptionをselectedにする */
var record = kintone.app.record.get();
if (record != null) {
for (var i = 0; i < select1.childNodes.length; i++) {
if (select1.options[i].value == record['record']['txt_industry']['value']) { //業界業種マスタの業界フィールド
select1.options[i].selected = true;
}
}
}
/* SecondCategoryに紐付け */
var div = kintone.app.record.getSpaceElement('FirstCategory'); //企業マスタの業界を表示させるスペース
/* 変数divにselect1を加える */
div.appendChild(select1);
changeSecondCategory(select1.value);
});
}
/* createTextのfunctionの定義 */
function createText(){
var div2 = kintone.app.record.getSpaceElement('FirstCategory'); //企業マスタの業界を表示させるスペース
div2.appendChild(kintone.app.record.getFieldElement('txt_industry')); //業界業種マスタの業界フィールド
var div3 = kintone.app.record.getSpaceElement('SecondCategory'); //企業マスタの業種を表示させるスペース
div3.appendChild(kintone.app.record.getFieldElement('txt_category')); //業界業種マスタの業種フィールド
}
/**
業界業種マスタのファンクションを定義
*/
function changeSecondCategory(first_category) {
kintone.api('/k/v1/records', 'GET', {app:FirstCategoryId, query:'txt_industry="' + first_category + '"'}, function(resp) {
var div = kintone.app.record.getSpaceElement('SecondCategory');
initSecondCategory(div);
var select2 = document.getElementById('cybozu_second_category');
// 業界と業種を紐付ける
if (resp.records.length != 0) {
var subTable = resp.records[0]['業種']['value']; //業界業種マスタのテーブル名
// 業界業種の要素を呼び出す
for (var i = 0; i < subTable.length; i++) {
var txt = document.createTextNode(subTable[i]['value']['txt_category']['value']);
var option = document.createElement('option');
option.appendChild(txt);
option.setAttribute('value', subTable[i]['value']['txt_category']['value']);
select2.appendChild(option);
}
// 編集の場合はレコード情報を読み込んで該当のoptionをselectedにする
var record = kintone.app.record.get();
if (record != null) {
for (var i = 0; i < select2.childNodes.length; i++) {
if (select2.options[i].value == record['record']['txt_category']['value']) {
select2.options[i].selected = true;
}
}
}
}
});
}
/**
セッションの時間？
*/
function Sleep(T){
var d1 = new Date().getTime();
var d2 = new Date().getTime();
while( d2 < d1+1000*T ){
d2=new Date().getTime();
}
return;
}
/**
業種の初期設定
*/
function initSecondCategory(div) {
var select2 = document.getElementById('cybozu_second_category');
if (select2 != null) {
select2.parentNode.removeChild(select2);
}
var txt = document.createTextNode('------------');
var option = document.createElement('option');
option.appendChild(txt);
option.setAttribute('value', '');
select2 = document.createElement('select');
select2.setAttribute('name', 'second_category');
select2.setAttribute('id', 'cybozu_second_category');
select2.appendChild(option);
div.appendChild(select2);
}
})();
この方法で難しいようでしたら別の方法でもかまいません。
どうぞよろしくお願い致します。