複数選択可能なセレクトボックスの選択値を、JavaScript(jQuery)で取得して送信、PHPで受信する

実装したかったのは以下。

• 複数選択可能なセレクトボックス(PHP(HTML))
• 未選択であればアラートを出力する(JavaScript(jQuery))
• API(PHP)に選択値を送信する(JavaScript(jQuery))
• 受信した選択値をあれこれする(PHP)

複数選択可能なセレクトボックスの実装

multiple要素を使う

input.php

<select multiple="" id="qiita_tag">
  <option value="1">Python</option>
  <option value="2">vs</option>
  <option value="3">Rails</option>
</select>

未選択の判定

selectedの件数で判断する

check.js

let select_count = $('#qiita_tag :selected').length;
if (select_count <= 0) {
    alert('タグを選択してください');
    return;
}

参照

• How to get number of selected options using jquery? - Stack Overflow ※ググった検索ワード：不明(履歴辿ったけどわからなかった)

選択値をAPIに送信

選択値のみを配列に詰め、JSON文字列に変換

post.js

let sel_opt = document.getElementById(qiita_tag);

let array_select_tag_val = [];
for (let i = 0; i < sel_opt.length; i++) {
    if (sel_opt[i].selected) {
        array_select_tag_val.push(sel_opt[i].value);
    }
}
let qiita_tag = JSON.stringify(array_select_tag_val);

let data = {};
data.qiita_tag = qiita_tag;
// 他にもパラメータを送信しているが、本記事では省略

$.ajax({
    method: 'POST',
    url: 'sample.php',
    data: data,
    cache: false
}).done(function(json, textStatus, jqXHR) {
    // 省略
}).fail(function(jqXHR, textStatus, errorThrown) {
    // 省略
});

参照

• morituriのブログ : Javascriptで複数選択SELECT要素の値を取得・設定するサンプル ※ググった検索ワード「js select multiple values」

• JavaScript→PHPに多次元配列を渡す - 六帖のかたすみ ※ググった検索ワード「javascript php 配列 ajax」

選択値を受信

JSON文字列をデコードして連想配列形式で取得

sample.php

<?php
$post_qiita_tag = filter_input(INPUT_POST, 'qiita_tag');
$array_qiita_tag = json_decode($post_qiita_tag, true);

参照

• JavaScript→PHPに多次元配列を渡す - 六帖のかたすみ ※ググった検索ワード「javascript php 配列 ajax」