PHP
JavaScript
jQuery

複数選択可能なセレクトボックスの選択値を、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;
}


参照


選択値を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) {
// 省略
});



参照


選択値を受信

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


sample.php

<?php

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


参照