ドロップダウンで一覧画面の絞込表示

kintone カスタマイズ
1

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

タイトルの件について、一覧画面上部にドロップダウンを作成し、選択された値で

絞込表示をしたいと考えております。

フォームには、選択というドロップダウンのフィールドがあり、項目が1,2,3とあります。

現在、下記コードでドロップダウンの表示はできているのですが、onchangeでの処理の書き方で躓いております。

(function () {
    'use strict';
    
    kintone.events.on("app.record.index.show", function (event) {
        
        var option1 = document.createElement('option');
        option1.value = '1';
        option1.text = '選択1';
        
        var option2 = document.createElement('option');
        option2.value = '2';
        option2.text = '選択2';
        
        var option3 = document.createElement('option');
        option3.value = '3';
        option3.text = '選択3';
        
        var label = document.createElement('select');
        label.id = 'dropdown';
        label.appendChild(option);
        label.appendChild(option1);
        label.appendChild(option2);
        label.appendChild(option3);
        kintone.app.getHeaderMenuSpaceElement().appendChild(label);
        
        select.onchange = function(){
            var viewid = event.viewId
            var str_query = '?view='+ viewid + '&' + 'query='+ '選択' +' in "' + select.value;
            document.location = location.origin + location.pathname + str_query
        }
        
        return event;
    });
})();

お手数でございますが、ご教授いただければ幸いです。

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

2

Naoさん

select.onchangeおよびselect.valueの値は意図する内容を取得できていますでしょうか？

(パッと見ですが、このコードでselect要素を持つのはlabelに見受けられました)

 

3

高田 旭様

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

select.onchangeおよびselect.valueの値は意図する内容を取得できていますでしょうか？

取れていません。どのように取得できるのかが分からず躓いております。。。

色々と調べてみて、下記部分を書き換えたのですが、やはりselect.valueの値を取得することが出来ませんでした。

var label = document.createElement('select');
label.id = 'dropdown';
label.setAttribute('onchange', 'this.select()');
label.appendChild(option);
label.appendChild(option1);
label.appendChild(option2);
label.appendChild(option3);
label.onchange = function () { search(); };
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

function search(){
    var viewid = event.viewId
    var str_query = '?view='+ viewid + '&' + 'query='+ '選択' +' in "' + select.value;
    document.location = location.origin + location.pathname + str_query
}

度々申し訳ございませんが、ご教授いただければ幸いです。

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

 

4

ヒントのつもりだったのですが、逆に混乱させてしまったかもしれないです。申し訳ないです。

今回のコードではselectという変数は宣言されていないので、select.valueはエラーになってしまうはず。

なので、"select要素"をセットしたlabel.valueが取得したい値なのかと思います。

下記内容で要望する動作満たせますでしょうか？

var label = document.createElement(‘select’);
label.id = ‘dropdown’;
label.setAttribute(‘onchange’, ‘this.select()’);
//label.appendChild(option); →この記述、エラーになりませんか？
label.appendChild(option1);
label.appendChild(option2);
label.appendChild(option3);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

label.onchange = function(){
    var viewid = event.viewId
    var str_query = ‘?view=’+ viewid + ‘&’ + ‘query=’+ ‘タイトル’ +’ like “’ + label.value +'”';
    document.location = location.origin + location.pathname + str_query
}

5

高田 旭様

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

ご教授いただいたよう設定し、queryの部分も変更しましたら、値を取得し、ページの絞込をできました。

ありがとうございます。

今後ともよろしくお願いいたします。