ドロップダウンリストの項目を変えたい

[Legacy_Account1858 (yoshimura（Legacy Account）)]

はじめまして
kintoneでの開発初心者です。

ドロップダウンリストが２つあり、1つ目の選択した内容によって2つ目のリストの項目を変更したいと思っています。

例えば１つ目のリストには野菜と果物があり、野菜を選択したら２つめのリストにはトマトとピーマンが入る。

果物を選択したらりんごとみかんが入るといったようなものです。

 

現段階でできている部分です。

(function()
{
“use strict”;
kintone.events.on(‘app.record.create.change.食べ物’, function(event)
{
var record = event.record;
var val = record[‘食べ物’][‘value’];
switch (val)
{
case ‘野菜’:

break;
case ‘果物’:

 

break;
}
return event;
});
})();

条件分岐はできているのでリストの項目を変える方法をどなたか教えてください。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

yoshimura様

お世話になります。

cstapの江田と申します。

今回の場合でしたら、2つ目のドロップダウンの選択肢はあらかじめトマト,ピーマン,りんご,みかんの４つ全てを用意しておいて、野菜のときはりんごとみかんを、果物のときはトマトとピーマンを非表示にする処理をしてみてはいかがでしょうか？

[Legacy_Account1858 (yoshimura（Legacy Account）)]

江田篤史様、返信ありがとうございます。

実際の内容が１つ目のドロップダウンが地方、２つ目のドロップダウンが地方ごとの都道府県なので、項目数が多いのですが、他に最善の方法はありませんか？

また、図々しいかと思いますが、できれば参考ページかソースを教えていただけると助かります。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

フィールドコード「地方」の「ドロップダウン」、フィールドコード「都道府県」の「文字列(1行)」、スペースID「space」の「スペース」の3つのフォーム部品を用意したとして、下記のコードで実装できるかと思います。
「地方」のドロップダウンの選択肢は「北海道地方」～「九州地方」を用意してください。
jQueryを用いているので読み込みを忘れずにお願いします。
スペースにドロップダウンを作成して、文字列(1行)にデータを保存するという実装方法になります。

(function() {
"use strict";
var pref = {
'北海道地方':['北海道'],
'東北地方':['青森','岩手','宮城','秋田','山形','福島'],
'関東地方':['東京','茨城','栃木','群馬','埼玉','千葉','神奈川'],
'中部地方':['新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知'],
'近畿地方':['京都','大阪三重','滋賀','兵庫','奈良','和歌山'],
'中国地方':['鳥取','島根','岡山','広島','山口'],
'四国地方':['徳島','香川','愛媛','高知'],
'九州地方':['福岡','佐賀','長崎','大分','熊本','宮崎','鹿児島','沖縄'],
}
kintone.events.on(['app.record.create.show','app.record.edit.show'], function() {
kintone.app.record.setFieldShown('都道府県', false);
});
kintone.events.on(['app.record.create.change.地方','app.record.edit.change.地方'], function(event) {
var record = event.record;
var html = `<select id="pref">`;
$.each(pref[record.地方.value], function(index, value){
html += `<option value="` + value + `">` + value + `</option>`;
});
html += `</select>`;
var space = kintone.app.record.getSpaceElement('space');
$(space).html(html);
});
kintone.events.on(['app.record.create.submit','app.record.edit.submit'], function(event) {
var record = event.record;
record.都道府県.value = $('#pref').val();
return event;
});
})();

[Legacy_Account1475 (きんとね（Legacy Account）)]

江田篤史 様

お世話になっております。

ドロップダウンリストの項目を変更するJavascriptを色々と調べていたところ、こちらの記事にたどり着きました。

ソースを検証したところ、確かに変更することが出来たのですが、kintoneではないドロップダウンデザインでした。

ドロップダウンデザインを変更する場合は、どのように変更すればよろしいのでしょうか？

プログラミング初心者ですので、見当違いのご質問でしたら、大変申し訳ございません。

よろしくお願い致します。

[Legacy_Account1740 (江田篤史（Legacy Account）)]

きんとね様

お世話になっております。

以下のようなコードでデザインを合わせることができるかと思います。

(function() {
"use strict";
var pref = {
'北海道地方':['北海道'],
'東北地方':['青森','岩手','宮城','秋田','山形','福島'],
'関東地方':['東京','茨城','栃木','群馬','埼玉','千葉','神奈川'],
'中部地方':['新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知'],
'近畿地方':['京都','大阪三重','滋賀','兵庫','奈良','和歌山'],
'中国地方':['鳥取','島根','岡山','広島','山口'],
'四国地方':['徳島','香川','愛媛','高知'],
'九州地方':['福岡','佐賀','長崎','大分','熊本','宮崎','鹿児島','沖縄'],
}
kintone.events.on(['app.record.create.show','app.record.edit.show'], function() {
kintone.app.record.setFieldShown('都道府県', false);
var dropdown = `<div class="control-gaia control-single_select-field-gaia" style="box-sizing: border-box;width: 196px;height: auto;"><div class="control-label-gaia"><span class="control-label-text-gaia">都道府県</span></div><div class="control-value-gaia" style="overflow: visible;"><div class="select-cybozu"><div class="gaia-argoui-select" style="user-select: none;"><span class="gaia-argoui-select-label">-----</span><span class="gaia-argoui-select-arrow"></span></div></div></div><div class="control-design-gaia"></div></div>`;
var space = kintone.app.record.getSpaceElement('space');
$(space).html(dropdown);
var dropdownList = `<ul id="myDropdownList" class="gaia-argoui-selectmenu gaia-argoui-selectmenu-vertical" style="user-select: none; visibility: visible; display: none;"><div class="goog-menuitem goog-option goog-option-selected" style="user-select: none;"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>-----</div></div></ul>`;
$("body").append(dropdownList);
$(space).find(".select-cybozu").click(function(){
$("#myDropdownList").css({
"top": ($(this).offset().top + $(this).height()) + "px",
"left": ($(this).offset().left) + "px",
});
$("#myDropdownList").toggle();
});
$("#myDropdownList").on("mouseenter",".goog-menuitem",function(){
$(this).addClass("goog-menuitem-highlight");
});
$("#myDropdownList").on("mouseleave",".goog-menuitem",function(){
$(this).removeClass("goog-menuitem-highlight");
});
$("#myDropdownList").on("click",".goog-menuitem",function(){
$(space).find(".gaia-argoui-select-label").html($(this).text());
$("#myDropdownList .goog-menuitem").removeClass("goog-option-selected");
$(this).addClass("goog-option-selected");
$("#myDropdownList").hide();
});
});
kintone.events.on(['app.record.create.change.地方','app.record.edit.change.地方','app.record.edit.show'], function(event) {
var record = event.record;
var space = kintone.app.record.getSpaceElement('space');
$(space).find(".gaia-argoui-select-label").html("-----");
var dropdownListContent = `<div class="goog-menuitem goog-option goog-option-selected" style="user-select: none;"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>-----</div></div>`;
$.each(pref[record.地方.value], function(index, value){
dropdownListContent += `<div class="goog-menuitem goog-option" style="user-select: none;"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>` + value + `</div></div>`;
});
$("#myDropdownList").html(dropdownListContent);
});
kintone.events.on(['app.record.create.change.地方','app.record.edit.change.地方','app.record.edit.show'], function(event) {
var record = event.record;
var space = kintone.app.record.getSpaceElement('space');
$(space).find(".gaia-argoui-select-label").html(record.都道府県.value);
});
kintone.events.on(['app.record.create.submit','app.record.edit.submit'], function(event) {
var record = event.record;
var space = kintone.app.record.getSpaceElement('space');
record.都道府県.value = $(space).find(".gaia-argoui-select-label").text();
$("#myDropdownList").hide();
return event;
});
})();

[Legacy_Account1475 (きんとね（Legacy Account）)]

江田篤史 様

ご返信ありがとうございます。

検証しましたところ、無事思い通りのデザインになりました。

ありがとうございます。今後ともよろしくお願い致します。

[Legacy_Account1475 (きんとね（Legacy Account）)]

江田篤史 様

度々、申し訳ございません。

フィールドコード「都道府県コード」の「数値」を追加して、

もし、北海道が選択されたら、都道府県コードに「1」をセットし、

青森が選択されたら、都道府県コードに「２」をセットするようなIF文を入れるにはどうすればよろしいのでしょうか？

下記ソースで検証しましたが、うまくセットされませんでした。

よろしくお願い致します。

(function () {
"use strict";

 function ChangeArea(event){
   var record = event.record;
  var space = kintone.app.record.getSpaceElement('space');
 if($(space).find(".gaia-argoui-select-label").text()==="北海道"){
  record['都道府県コード']['value'] = "1";
  record['都道府県コード']['disabled'] = true;
 }else if($(space).find(".gaia-argoui-select-label").text()==="青森"){
  record['都道府県コード']['value'] = "2";
  record['都道府県コード']['disabled'] = true;
 }
 }
return event;
}

var events = ['app.record.create.show','app.record.edit.show','app.record.index.edit.show',
'app.record.edit.change.地方','app.record.create.change.地方','app.record.index.edit.change.地方'];
kintone.events.on(events, function(event) {
ChangeArea(event);
return event;
});
})();

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

きんとね様

「地方」のドロップダウンの値が変更されたときに都道府県コードをセットするのではなく、都道府県が選択されたとき(以前私が書いたコードの34行目($(space).find(“.gaia-argoui-select-label”).html($(this).text());)のあと)、あるいはsubumitするときにセットしてみてはいかがでしょうか。

[Legacy_Account1475 (きんとね（Legacy Account）)]

江田篤史 様

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

($(space).find(“.gaia-argoui-select-label”).html($(this).text());の後に、if文挿入で動くようになりました。

ありがとうございます。

[Legacy_Account1748 (玲香（Legacy Account）)]

江田篤史 様

お世話になっております。横から大変失礼致します。

スペースにドロップダウンを作成して、文字列(1行)にデータを保存するという実装方法とても感動致しました。

コードでこんなこともできるって、凄過ぎます。

今わたくしも同じような動きを探しておりますが、テーブルになった場合も同じ結果は可能でしょうか？

スペースはテーブルに入らなくて、なにかアドバイスいただけることは可能でしょうか？何卒よろしくお願い致します。

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

玲香様

お世話になっております。

実装不可能ではないですが、上記の実装と比較するとはるかに困難です。

仰る通りスペースを利用することはできないので、DOMを解析して変更することになります。
データ保存のために用意した「文字列 (1行)」フィールドがサブテーブル内の何列目にあたるかを数えて、その中身をドロップダウンに書き換えるのが比較的簡単かと思います。

//(例)2列目を書き換える場合
[].forEach.call(document.querySelectorAll('tr td:nth-child(2)'), function(element){
element.innerHTML = ...;
});

ただ、他にも困難な点は多々あるのでその実装にこだわるべきかは見直しても良いかもしれません。

[Legacy_Account2696 (nanasi（Legacy Account）)]

江田 篤史 様

いつも大変お世話になっております。

いきなり横から失礼いたします。

質問者様のとおり、

ドロップダウンリストが２つあり、1つ目の選択した内容によって2つ目のリストの項目を変更したいと思っています。

例えば１つ目のリストには野菜と果物があり、野菜を選択したら２つめのリストにはトマトとピーマンが入る。

果物を選択したらりんごとみかんが入るといったようなものです。

 

この処理を実行したいと考えております。

リストの項目を変える方法の記述の仕方が分からず困っております。

ご教授頂けると助かります。

よろしくお願いいたします。

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

松本一輝さん

お世話になっております。

最初のコメントの通り、表示非表示を切り替えるのであれば、kintone.app.record.setFieldShownで実装できます。

また、動的ドロップダウンのプラグインもご紹介しているので、よろしければご利用ください。
https://developer.cybozu.io/hc/ja/community/posts/900003008343

[Legacy_Account2696 (nanasi（Legacy Account）)]

江田 篤史 さん

ご回答頂きましてありがとうございます。

kintone.app.record.setFieldShownは、第一引数にフィールドコード名を記述するかと思いますが、ドロップダウンの値も設定する事は可能なのでしょうか。

 

今回の場合でしたら、2つ目のドロップダウンの選択肢はあらかじめトマト,ピーマン,りんご,みかんの４つ全てを用意しておいて、野菜のときはりんごとみかんを、果物のときはトマトとピーマンを非表示にする処理をしてみてはいかがでしょうか？

この場合ですと、フィールドコード名は同一になってしまうので、どのように区別したら良いか分からず、、、

本当に初心者で申し訳ありません。

ご教授頂けますと本当に助かります。

よろしくお願いいたします。

 

[Legacy_Account1740 (江田篤史（Legacy Account）)]

松本一輝さん

お世話になっております。
申し訳ございません。自分のコメントなのに勘違いしておりました。
選択肢を非表示となるとkintone APIでは実現できないですね。
DOM操作で無理やり実現することもできますが、kintoneの仕様変更により動作しなくなる可能性があるため、おすすめできる方法ではないです。

kintone.app.record.setFieldShownで実装する場合は、ドロップダウンフィールドを3つ用意すると良いです。
1つ目が選択肢に野菜と果物、2つ目が選択肢にトマトとピーマン、3つ目が選択肢にりんごとみかんを持つフィールドです。
1つ目のフィールドが野菜のときは3つ目のフィールドを非表示、1つ目のフィールドが果物のときは2つ目のフィールドを非表示とすると良いと思います。

[Legacy_Account2696 (nanasi（Legacy Account）)]

江田 篤史 さん

お世話になります。

承知しました。

実装してみようと思います。

助かりました。

ありがとうございました。

[Legacy_Account2706 (Shun_don（Legacy Account）)]

かなり時間が経過してますが、質問です。

レコード編集画面で、保存すると、

都道府県フィールドの値がクリアされてしまします。

どのようにしたらクリアされないでしょうか？

よろしくお願いします。

[Legacy_Account843 (KKK（Legacy Account）)]

江田篤史様

お世話になっております。

こちらの記述でドロップダウンではなく、例えば中国地方を選んだ時に広島と岡山を選択するような

都道府県を複数選択にすることは可能でしょうか？

ご教示いただけましたら幸いです。

よろしくお願いいたします。