# モバイル版でドロップダウンを追加したい

**URL:** <https://community.cybozu.dev/t/topic/867>\
**Category:** kintone 開発相談\
**Created:** [2017 年 8 月 22 日午前 2:44 UTC](https://community.cybozu.dev/t/topic/867 "2017-08-22T02:44:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1862](https://avatars.discourse-cdn.com/v4/letter/l/58956e/32.png) [@Legacy\_Account1862](https://community.cybozu.dev/u/Legacy_Account1862)\
**Post date:** [2017 年 8 月 22 日午前 2:44 UTC](https://community.cybozu.dev/t/topic/867/1 "2017-08-22T02:44:53Z")

</div>

モバイル版だとレコード一覧画面の表示後イベントの

kintone.mobile.app.getHeaderSpaceElement()

にて処理を行う形になると思います。

ボタンの追加は、下記のように追加できたのですが、同じようにドロップダウン（値は、他のアプリからですが、最初は固定値でも構いません）を追加したいです。

初歩的な内容で申し訳ありませんが、ご教授ください。

&nbsp;

// ボタンの追加  
var myButton = document.createElement(‘button’);  
myButton.id = ‘my\_button’;  
myButton.innerHTML = ‘ボタン’;

kintone.mobile.app.getHeaderSpaceElement().appendChild(myButton);

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1169](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@Legacy\_Account1169](https://community.cybozu.dev/u/Legacy_Account1169)\
**Post date:** [2017 年 8 月 25 日午前 8:54 UTC](https://community.cybozu.dev/t/topic/867/2 "2017-08-25T08:54:55Z")

</div>

Toshihiro.Mさん

下記の内容で、試して、モバイル版でも表示することはできました。  
ただし、モバイルのデザインと合わない雰囲気でした^^;

kintone.events.on(‘mobile.app.record.index.show’, function(event) {

var mySelect = document.createElement(‘select’);  
mySelect.id = ‘my\_select’;

var selectBox = {  
‘1’ : ‘セレクトA’,  
‘2’ : ‘セレクトB’,  
‘3’ : ‘セレクトC’,  
};

for ( var i in selectBox ) {  
var option = document.createElement(‘option’);

option.setAttribute(‘value’, i);  
option.innerHTML = selectBox[i];

mySelect.appendChild(option);  
}

kintone.mobile.app.getHeaderSpaceElement().appendChild(mySelect);

});

参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1862](https://avatars.discourse-cdn.com/v4/letter/l/58956e/32.png) [@Legacy\_Account1862](https://community.cybozu.dev/u/Legacy_Account1862)\
**Post date:** [2017 年 8 月 28 日午前 12:04 UTC](https://community.cybozu.dev/t/topic/867/3 "2017-08-28T00:04:56Z")

</div>

maaiさん

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

上記の内容で確認できました。

デザインはCSSで調整になりますね。

&nbsp;

上記のような内容はjavascriptの文法になると思いますが

参考にされているサイトなどありますでしょうか？

もしよろしければ、今後のためにご教授いただけると幸いです。

&nbsp;

この度はありがとうございました。

&nbsp;