技術資料

セレクトボックスでデータ更新を実現する仕組みと実装例

2024.11.29

前回のチェックボックスでデータ更新を実現する仕組みと実装例の応用で、select要素によるセレクトボックス変更時に、サーバーサイドで情報を更新するというインターフェイスを考えてみたいと思います。

画面のイメージは以下のような感じ。

記事タイトル カテゴリ 作成日 ステータス
404エラーとの戦い方:迷子の旅路 Web開発 2024-11-20
珈琲とHTTPステータスコードの関係性 技術雑談 2024-11-25
将棋AIの敗北:人間の直感は無敵なのか 将棋 2024-11-26
恐竜は本当に羽毛だった?化石の新発見 古生物 2024-11-27
B'zの歌詞で学ぶJavaScript入門 技術雑談 2024-11-27

ステータスのセレクトボックスの値を変更したら、サーバー側でテーブルのステータス値を変更するイメージ。
今回もできるだけ汎用性のある形で実装してみようと思います。

HTML側 - data属性で情報を付与する

HTML側では、select要素に、data属性で情報を付与しておきます。

<table>
    <tr>
        <th>記事タイトル</th>
        <th>カテゴリ</th>
        <th>作成日</th>
        <th>ステータス</th>
    </tr><tr>
        <td>404エラーとの戦い方:迷子の旅路</td>
        <td>Web開発</td>
        <td>2024-11-20</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/1">
                <option value="4" selected>公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>珈琲とHTTPステータスコードの関係性</td>
        <td>技術雑談</td>
        <td>2024-11-25</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/2">
                <option value="4" selected>公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>将棋AIの敗北:人間の直感は無敵なのか</td>
        <td>将棋</td>
        <td>2024-11-26</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/3">
                <option value="4">公開中</option>
                <option value="3" selected>公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>恐竜は本当に羽毛だった?化石の新発見</td>
        <td>古生物</td>
        <td>2024-11-27</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/4">
                <option value="4">公開中</option>
                <option value="3">公開予約</option>
                <option value="2" selected>確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>B'zの歌詞で学ぶJavaScript入門</td>
        <td>技術雑談</td>
        <td>2024-11-27</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/5">
                <option value="4">公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1" selected>編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr>
</table>

data-posturlに、セレクトボックスの値が変更された時に送信するサーバー側プログラムへのURLを指定しておきます。
今回の例だと、update_status という処理に各記事のID番号を付与してURLとして指定しています。

また、各セレクトボックスには、共通のクラスを指定しておきます(今回の例では trigger-postchangedata というクラス名)。

JavaScript側 - チェックボックスの状態を見て値を付与

セレクトボックスの値が変更された時に起動するJavaScript側の処理は以下のような感じ(今回はjQueryを使います)。

// クラス「trigger-postchangedata」の値が変更されたら起動
$(".trigger-postchangedata").change(function(){
    // data-posturlの値のURLに、フォームの値を付与してPOST
    let post_url = $(this).data('posturl');
    post_url += '/' + $(this).val();
    $.ajax({
        url: post_url,
        type: 'POST',
        dataType: 'html',
        timeout: 5000,
    })
    .done(function(data) {
        // 成功時の処理
        console.log(data);
    })
    .fail(function(jqXHR, textStatus) {
        // 失敗時の処理
        console.log(textStatus);
        alert('Error: postchangedata');
    });
});

上記のスクリプトで、以下のURLに対してPOSTされることになります。

  • https://mydomain/script/update_status/[article_id]/[status]

サーバーサイドでは、このURLで受け取った値を元に、データを更新すればOK。

また、今回はセレクトボックスを例に出しましたが、select要素以外のフォーム部品(input type="text" 等)でも、クラス名trigger-postchangedataを付与すれば、値が変更されると同様の動きが実現できます。

チェックボックスでデータ更新を実現する仕組みと実装例

2024.11.27

一覧画面のチェックボックスを用いて、データの状態を即時に更新する仕組みを実装する方法を解説します。HTMLの構造設計からJavaScriptの連携処理、サーバーサイドでの対応まで、説明しています。

HTML JavaScript jQuery

datalistとJavaScriptで作るタグ入力フォームの実装ガイド

2024.11.17

ブログやアプリケーションで便利な「タグ入力フォーム」。この記事では、datalist要素を利用して、既存タグの選択と新規タグの追加を同時に実現するUIの作成方法をご紹介します。さらに、JavaScriptとCSSを活用して、複数選択対応やタグ削除機能、Enterキーでのタグ追加機能も実装。タグ入力フォームを効率的かつユーザーフレンドリーにカスタマイズする方法を詳しく解説します。

CSS HTML JavaScript jQuery

ページリロードボタンを作成するシンプルな方法

2023.05.25

リロード機能を持つボタンを追加したい時に便利な、location.reload() を利用した実装方法を解説します。初心者にもわかりやすいコード例付きです。

HTML JavaScript

ラジオボタンの選択状態をjQueryで操作する基本テクニック

2023.04.13

、jQueryを使ってHTMLのラジオボタンの値を設定する方法を解説。

JavaScript jQuery

阿部辰也へのお仕事の依頼・お問い合わせ

お名前 *必須
会社名
メールアドレス *必須
電話番号
URL
お問い合わせのきっかけ
お問い合わせの内容 *必須
個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP