jQuery、AJAX、PHP、MySQL を使用して依存ドロップダウンを設定するにはどうすればよいですか?

jQuery/AJAX および PHP/MySQL を使用して最初のドロップダウン選択に基づいて 2 番目のドロップダウンを設定する

動的ドロップダウン メニューを開発すると、ユーザーはフォームを操作できるようになりますもっと簡単に。この記事では、jQuery/AJAX と PHP/MySQL を使用して最初のドロップダウンでの選択に基づいて 2 番目のドロップダウンを設定する方法を説明します。

HTML コードは 2 つのドロップダウン リストを作成し、最初のドロップダウン リストはページの読み込み時に設定されます。 2 番目のドロップダウンには、最初のドロップダウンでの選択に基づいたオプションが表示されます。

PHP コードはデータベースにクエリを実行し、2 番目のドロップダウンの値を含む JSON オブジェクトを生成します。その後、JSON オブジェクトは jQuery/AJAX リクエストに渡されます。

$(function() {

  $("#item_1").change(function() {

    var group_id = $(this).val();

    $.ajax({
      type: "POST",
      url: "../../db/groups.php?item_1_id=" + group_id,
      dataType: "json",
      success: function(data) {
        // Clear options corresponding to earlier option of first dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');
        // Populate options of the second dropdown
        $.each(data.subjects, function(i, val) {
          $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
        });
        $('select#item_2').focus();
      },
      beforeSend: function() {
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Loading...</option>');
      },
      error: function() {
        $('select#item_2').attr('disabled', true);
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">No Options</option>');
      }
    });

  });
});

JSON 結果は次のようにフォーマットされる必要があることに注意してください。

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

JSON オブジェクトが受信され、解析されると、 JavaScript では、オプションは 2 番目のドロップダウンに動的に追加されます。これにより、以前の選択に基づいてオプションを絞り込むためのユーザーフレンドリーな方法が提供されます。

以上がjQuery、AJAX、PHP、MySQL を使用して依存ドロップダウンを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。