2つのマスタDBのデータを連動プルダウンにする

６． 部署プルダウン変更時のjQueryを埋め込み（全体像②）

部署プルダウンが変更された時、「部署名（部署コード）」をカスタムプログラムに送信し、戻り値の社員データで社員プルダウンを作成するプログラムを埋め込みます。（全体像②）

（１）アンケートフォーム＞入力ページ内の以下の「社員コード」の<input>タグを削除します。

<input class="input $errorInputColor:workerCode$" type="text" name="workerCode" value="$workerCode$" maxlength="32" >

（2）アンケートフォーム＞入力ページ内の「社員コード」の<input>タグがあった場所に、以下のプルダウン作成処理を貼り付けます。

<select class="workerCode" name="workerCode" value="">
<option value="">選択してください</option>
</select>

（3）ajaxを利用するため、jQueryを読み込みます。

（4）以下のコードを入力フォームに貼り付けます。※部分を書き換えてください。

<script type="text/javascript">
$(function(){
  $('[name=deptCode]').on('change', function(){
  var dept_val = $(this).val();
  $.ajax({
    url: "https://www.pi-pe.co.jp/api/service/custom_program/run/request?spiral_api_token=※1上記３で発行したAPIトークン&title=※2上記５で作成したカスタムプログラムタイトル&arg=" + dept_val,
    type: 'POST',
    dataType: 'json',
    data: {
      dept : dept_val
    },
    success:function(data){
      $('.workerCode option').remove();
      setResult(data);
    },
    error:function(){
      console.log("失敗しました");
    }
  });
});

function setResult(data) {
  var jsStr = JSON.stringify(data);
  var jsObject = JSON.parse(jsStr);
  var js = JSON.parse(jsObject["output"]);
  $.each(js, function(workerCode, workerName){
    $('.workerCode').append($('<option >').text(workerName).attr('value', workerCode));
  });
}
});
</script>

※1APIトークンとは
下記の赤枠内のことを指します。

※2カスタムプログラムタイトルとは
下記の赤枠内のことを指します。

７． 入力ページ再読込時のjQueryを埋め込み

①確認ページから「戻る」を押した場合②入力エラーとなった場合、選択した「部署名」「社員名」を再設定する処理をアンケートフォーム＞入力ページ記載します。

<script>
$(function() {
  var deptCode = $('.deptCode').val();
  $.ajax({
    url: "https://www.pi-pe.co.jp/api/service/custom_program/run/request?spiral_api_token=上記３で発行したAPIトークン&title=上記５で作成したカスタムプログラムタイトル&arg=" + deptCode,
    type: 'POST',
    dataType: 'json',
    data: {
      dept : deptCode
    },
    success:function(data){
      $('.workerCode option').remove();
      setResult(data);
    },
    error:function(){
      console.log("失敗しました");
    }
  });
});

function setResult(data) {
  var jsStr = JSON.stringify(data);
  var jsObject = JSON.parse(jsStr);
  var js = JSON.parse(jsObject["output"]);
  var selectWorkerCode = $('#workerCode').val();
  $('.workerCode').append($('<option >').text("選択してください"));
  $.each(js, function(workerCode, workerName){
    $('.workerCode').append($('<option >').text(workerName).attr('value', workerCode));
    $('.workerCode').val(selectWorkerCode);
  });
};
</script>

８． 「部署名」「社員名」確認ページ表示用の値を設定

選択された「部署」「社員名」プルダウンのラベル名をテキストフォールドに格納し、確認ページで表示できるように設定します。

（１）アンケートフォーム＞入力ページの黄色部分を追加します。

$form:hidden$
<input type="hidden" class="deptName" name="deptName" value="$deptName$">
<input type="hidden" class="worker" name="worker" value="$worker$">
<input type="hidden" id="workerCode" name="workerCode" value="$workerCode$">

（２）アンケートフォーム＞入力ページの<form>タグにid=”check”をつけます。

<form method="post" action="/regist/Reg2" id="check">

（３）アンケートフォームの入力ページに以下の処理を追記します。

<script>
  $(function(){
    $('#check').submit(function(){
      // 選択されている「部署名」
      var selectDeptCode = $('.deptCode option:selected').text();
      $(".deptName").val(selectDeptCode);
      // 選択されている「社員名」
      var selectWorkerCode = $('.workerCode option:selected').text();
      $(".worker").val(selectWorkerCode);
      // 選択されている「社員コード」
      var workerCode = $('.workerCode').val();
      $("#workerCode").val(workerCode);
    });
  });
</script>