Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

  • 複数選択可能なセレクトボックス(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);

参照

PET_HAL
無職。転職活動中。基本情報技術者(H26春)。5年3か月PGとして働いていました。前職での主な言語はPHP、Java。Webアプリ、Androidアプリ、スマートスピーカースキル・アプリ開発に携わってました。
https://dosomething.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away