背景・実現したいこと
こちらを参考にしたのですが、都道府県をドロップダウンではなくて複数選択したいです。
可能であればご教示いただけましたら幸いです。
よろしくお願いいたします。
エラー情報 （開発者ツールのコンソール）
利用したソースコード
(function() {
"use strict";
varpref = {
'北海道地方':['北海道'],
'東北地方':['青森','岩手','宮城','秋田','山形','福島'],
'関東地方':['東京','茨城','栃木','群馬','埼玉','千葉','神奈川'],
'中部地方':['新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知'],
'近畿地方':['京都','大阪三重','滋賀','兵庫','奈良','和歌山'],
'中国地方':['鳥取','島根','岡山','広島','山口'],
'四国地方':['徳島','香川','愛媛','高知'],
'九州地方':['福岡','佐賀','長崎','大分','熊本','宮崎','鹿児島','沖縄'],
}
kintone.events.on(['app.record.create.show','app.record.edit.show'], function() {
kintone.app.record.setFieldShown('都道府県',false);
vardropdown = `<divclass="control-gaia control-single\_select-field-gaia"style="box-sizing: border-box;width: 196px;height: auto;"><divclass="control-label-gaia"><spanclass="control-label-text-gaia">都道府県</span></div><divclass="control-value-gaia"style="overflow: visible;"><divclass="select-cybozu"><divclass="gaia-argoui-select"style="user-select: none;"><spanclass="gaia-argoui-select-label">-----</span><spanclass="gaia-argoui-select-arrow"></span></div></div></div><divclass="control-design-gaia"></div></div>`;
varspace = kintone.app.record.getSpaceElement('space');
$(space).html(dropdown);
vardropdownList = `<ul id="myDropdownList"class="gaia-argoui-selectmenu gaia-argoui-selectmenu-vertical"style="user-select: none; visibility: visible; display: none;"><divclass="goog-menuitem goog-option goog-option-selected"style="user-select: none;"><divclass="goog-menuitem-content"style="user-select: none;"><divclass="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) {
varrecord =event.record;
varspace = kintone.app.record.getSpaceElement('space');
$(space).find(".gaia-argoui-select-label").html("-----");
vardropdownListContent = `<divclass="goog-menuitem goog-option goog-option-selected"style="user-select: none;"><divclass="goog-menuitem-content"style="user-select: none;"><divclass="goog-menuitem-checkbox"style="user-select: none;"></div>-----</div></div>`;
$.each(pref[record.地方.value], function(index,value){
dropdownListContent += `<divclass="goog-menuitem goog-option"style="user-select: none;"><divclass="goog-menuitem-content"style="user-select: none;"><divclass="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) {
varrecord =event.record;
varspace = 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) {
varrecord =event.record;
varspace = kintone.app.record.getSpaceElement('space');
record.都道府県.value= $(space).find(".gaia-argoui-select-label").text();
$("#myDropdownList").hide();
returnevent;
});
})();