質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2645閲覧

google apps scriptで2段階のセレクトボックスを作りたい

pyon_214

総合スコア8

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2020/03/13 14:52

編集2020/03/13 14:54

###やりたいこと
私は現在社内で使う用のシステムを開発しています。しかし、プログラミングに関して全くの素人であるためぜひ皆様のお力を貸していただけたらと考えております。以下のシステムを作りたいと考えております。

1.セレクトボックスで人物を選択する
2.選択した人物が担当している会社(複数)を別のセレクトボックスに表示する
但し人物と会社のデータはそれぞれスプレッドシートから取得する。

人物と会社のリストは以下のような形でスプレッドシートに記載してあります。

【人物リスト】
イメージ説明
【会社と担当者】
イメージ説明

おそらく会社のデータに関しては、webアプリ起動時に全部取得しておいて、人物のセレクトボックスの内容が変わる度にonchangeで会社のセレクトボックスの内容のdisplayをnoneにしていくのかなと思ったのですが、コードの書き方がわかりません。

不躾な質問かもしれませんが、ご回答していただけるとありがたいです。

index.html

1 2<!DOCTYPE html> 3<html> 4 <head> 5 <base target="_top"> 6 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 7 8 </head> 9 <body> 10 11 <form name="form" action="xxxxxxx" method="post"> 12 13 <select id="staffname" onchange="changelist()"> 14 </select> 15 16 <select id="companyname"> 17 </select> 18 19 20 <input type="submit" value="確定"> 21 </form> 22 23 <script> 24 25 //名前のプルダウンを作る関数 26 google.script.run.withSuccessHandler(pulldownstaffname).namearraygenerate(); 27 28 function pulldownstaffname(data){ 29  var values = JSON.parse(data); 30 31  for(var i=0;i<values.length;i++){ 32  let op = document.createElement("option"); 33  op.value = values[i][0]; //value値 34  op.text = values[i][0]; //テキスト値 35  document.getElementById("staffname").appendChild(op); 36 } 37 } 38 39 //会社のプルダウンを作る関数 40 google.script.run.withSuccessHandler(pulldowncompany).companyarraygenerate(); 41 42 function pulldowncompany(data){ 43  var values = JSON.parse(data); 44 45 for(var i=0;i<values.length;i++){ 46  let op = document.createElement("option"); 47 op.setAttribute("pic", values[i][0]); //担当者を表すkeyを追加 48  op.value = values[i][1]; //value値 49  op.text = values[i][1]; //テキスト値 50 op.style.display="none"; 51 op.setAttribute("name","company");//changelist関数用に属性追加 52  document.getElementById("companyname").appendChild(op); 53 } 54 } 55 56 function changelist(){ 57 58 var selectedname = document.getElementById('staffname').value; //選ばれた名前 59 60 var companylist = document.getElementById("companyname").children; //会社の要素のリスト 61 62 for(var i = 0;i<companylist.length;i++){ 63 if(companylist[i].value == selectedname){ 64 companylist[i].style.display = "block"; 65 } 66 } 67 68 69 } 70 </script> 71 </body> 72</html> 73
function doGet() { return HtmlService.createTemplateFromFile('index').evaluate(); } function doPost(e) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var dat = new Date(); //parameterはobject型なのでstring型に変換 var staffname = e.parameter.staffname.toString(); sheet.appendRow([date,staffname]); return HtmlService.createTemplateFromFile('index').evaluate(); } var spreadsheet = SpreadsheetApp.openById('xxxxxxxxx') function namearraygenerate(){ var sheet = spreadsheet.getSheetByName('namelist'); var values = sheet.getDataRange().getValues(); //但しnamevaluesは1×人數の二次元配列である(?) return JSON.stringify(values); } function companyarraygenerate(){ var sheet = spreadsheet.getSheetByName('companylist'); var values = sheet.getDataRange().getValues(); //但しvaluesは二次元配列である Logger.log(values); return JSON.stringify(values); }
s.k👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2020/03/14 00:54

過去2回の質問との違いが分かりません。欲しい答えが出ないから同じ質問を繰り返しているのだと思いますが、同じことを繰り返しても結果に変化はないと思います。 2段階のプルダウンは下記でできているはずです。 https://teratail.com/questions/246345
guest

回答1

0

ベストアンサー

これは二段階にわけてプルダウンを作るので、コードは複雑ではないですが、実運用する上で色々考慮しなければならない部分が多いのでやや難易度は上です。

1回目は普通に分類でプルダウンを作り、二回目は選んだ分類を元に別のGAS関数をgoogle.script.run.withSuccessHandlerで取得し、構築する。

selectタグにはonChangeイベントを設けておいてこれを発火させる仕組みが必要です。

ポイントは2個目のgoogle.script.run.withSuccessHandlerで呼び出すGAS関数には選んだ項目を引数で渡し、GAS側ではそれを元にスプレッドシートからフィルタした値を配列で返してあげる点です。以下はそのGAS側の関数です。bunruiで引数をとっています。

javascript

1//抽出用プルダウン用 2function kinoko(bunrui){ 3 //シートを取得 4 var ss = SpreadsheetApp.getActiveSpreadsheet(); 5 var list = ss.getSheetByName("キノコ名").getRange("A2:C").getValues(); 6 7 //配列を用意 8 var array = []; 9 10 //bunruiに基づきフィルタした値を配列にpush 11 for(var i = 0;i<list.length;i++){ 12 //分類に合致したらpush 13 if(list[i][0] == bunrui){ 14 array.push(list[i]); 15 } 16 } 17 18 //取得データを返す 19 return JSON.stringify(array); 20}

参考:Google Apps Scriptで二段階で選択するプルダウンを作る

投稿2020/03/13 23:05

officeforest

総合スコア412

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問