whitedoragon score 10
2018/05/22 10:02 投稿
| 更に調べていきましていろいろ試しましたところ、自己解決しましたので |
| ご報告させていただきます。 |
| 下記サイトを参考・更に読み進めていきまして、セレクトボックス（検索機能）を |
| 【javascript.html】getSelectList()イベント内に生成させていただきました。 |
| ※リンク元 [select2の使い方](https://iritec.jp/web_service/11240/) |
| あと、投稿時に【stylesheet.html】を記述するのを忘れていましたが |
| その中にも検索機能がついているスタイルの記述を追記しました。 |
| 【javascript.html】 |
| ```ここに言語を入力 |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> |
| <script src="https://use.fontawesome.com/7bcbed1321.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script> |
| <script> |
| <!-- 以下を追記 --> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> |
| <!-- ここまで --> |
| /** |
| コード.jsのgetSelectListFromSS()を読んで、スプレッドシートのデータをもとに、セレクトボックスを構築する |
| */ |
| function getSelectList() { |
| try { |
| google.script.run |
| .withSuccessHandler(function(result) { |
| console.log("result", result); |
| var select = document.getElementById('select_id3'); |
| var option = document.createElement('option'); |
| option.setAttribute('value', ''); |
| option.setAttribute('selected', true); |
| option.innerHTML = '未選択'; |
| select.appendChild(option); |
| //以下を追記 |
| $('select').select2(); |
| //ここまで |
| for (var i = 0; i < result.data.length; i++) { |
| option = document.createElement('option'); |
| option.setAttribute('value', i + 1); |
| option.innerHTML = result.data[i]; |
| select.appendChild(option); |
| } |
| }) |
| .withFailureHandler(function(result) { |
| toastr.error('リストの取得に失敗しました。', result); |
| }) |
| .getSelectListFromMasterSS(); |
| } catch (e) { |
| toastr.error(e); |
| } |
| } |
| // 処理中アイコン表示・非表示 |
| function processing(processing) { |
| if (processing) { |
| document.getElementById('processing').style.visibility = "visible"; |
| document.getElementById('send_button').setAttribute("disabled", true); |
| } else { |
| document.getElementById('processing').style.visibility = "hidden"; |
| document.getElementById('send_button').removeAttribute("disabled"); |
| } |
| } |
| // ロード完了後の処理 |
| $(function() { |
| // トースト通知の位置指定 |
| toastr.options.positionClass = "toast-bottom-left"; |
| // バリデーションチェック有効化 |
| $('#myForm').validator(); |
| // 処理中アイコン非表示 |
| processing(false); |
| // セレクトボックスのリストを動的に取得する |
| getSelectList(); |
| // submit時のイベント登録 |
| $('#myForm').validator().on('submit', function(e) { |
| if (document.getElementById('send_button').className.indexOf("disabled") != -1) { |
| // submit用のボタンのスタイルにdisabledが設定されていればバリデーションエラー |
| } else { |
| // バリデーションエラーでなければ送信 |
| sendData(); |
| } |
| }) |
| }); |
| </script> |
| ``` |
| 【stylesheet.html】 |
| ```ここに言語を入力 |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" crossorigin="anonymous"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"> |
| <!-- 以下を追記 --> |
| <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> |
| <!-- ここまで --> |
| ``` |
