一覧画面でドロップダウンをjsで作成したが動かない

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

現在一覧画面にドロップダウンを表示し中に新規と既存を入れました。

新規ならレコードの新規を表示し既存なら既存を表示したいのですがうまくいっていない状況です。

下記が現在のコードになります。

ご回答よろしくお願いします。

(function () {
'use strict';

kintone.events.on("app.record.index.show", function (event) {

var option1 = document.createElement('option');
option1.value = '1';
option1.text = '新規';

var option2 = document.createElement('option');
option2.value = '2';
option2.text = '既存';


var label = document.createElement('select');
label.id = 'dropdown';
label.setAttribute('onchange', 'this.select()');
label.appendChild(option1);
label.appendChild(option2);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

var dropdown = document.getElementById("dropdown");
if(dropdown==='新規'){
event.record.判別項目.value==='新規';
}else if(dropdown=='既存'){
event.record.判別項目.value==='既存';
}
return event;
});
})();

翼さん

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

labelにonchangeプロパティをセットすればよいかと思います。
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onchange

また、条件分岐にはvalue属性を用いると良いかと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#htmlattrdefvalue

labelとdropdownには同じ要素が入ると思うので、dropdownは省いてしまってよいかと思います。

// ...

var label = document.createElement('select');
label.id = 'dropdown';
label.appendChild(option1);
label.appendChild(option2);
label.onchange = function(e) {
  if (e.target.value === '1') {
    event.record.判別項目.value='新規';
  } else if (e.target.value == '2') {
    event.record.判別項目.value='既存';
  }
}
document.body.appendChild(label);
event.record.判別項目.value==='新規';

===は代入ではなくて、同じ値かを調べるときに使うものです。

 

一覧ページで、動作させたいようですが、表示を切り替えたいという話なのでしょうか?特定のレコードのデータを修正したいと言うことなのでしょうか?実現したいことがわかりませんでした。

vent.record.判別項目.value==='既存';

江田さんの例で eventと ventのtypoになっているようです。

haradaさん

ご指摘ありがとうございます。

仰る通りでした。

修正いたします。

江田さんharadaさんご回答ありがとうございます。

江田さん

上記でのコードを入力したのですがドロップダウンが消えてしまいました。デバックで確認したところ label.onchange = function(e)の中の条件に入ってきていない状況でした。

特にエラーとかはないのですが対処ほうがわからない状況です。

(function () {
'use strict';

kintone.events.on("app.record.index.show", function (event) {

var option1 = document.createElement('option');
option1.value = '1';
option1.text = '新規';

var option2 = document.createElement('option');
option2.value = '2';
option2.text = '既存';


var label = document.createElement('select');
label.id = 'dropdown';
label.appendChild(option1);
label.appendChild(option2);
label.onchange = function(e) {
if (e.target.value === '1') {
event.record.判別項目.value='新規';
} else if (e.target.value == '2') {
event.record.判別項目.value='既存';
}
};
document.body.appendChild(label);
return event;
});
})();

haradaさん

説明不足になり大変申し訳ございません。

一覧画面にドロップダウンを作成し、中に新規と既存をいれ

新規と既存で画面を切り替えたいと考えています。

現在うまくいっていない状況で上記のコードで何かアドバイスを頂けたら幸いです。

よろしくお願いします。

document.body.appendChild(label);

のところは、当初記述されていた、

kintone.app.getHeaderMenuSpaceElement().appendChild(label);

のままで大丈夫だと思います。

たねまきさん

ご指摘ありがとうございます。
仰るとおりでした。

 

翼さん

もろもろ間違っていて、混乱を招いてしまって申し訳ございません。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。