前提・実現したいこと
DBからプルダウンの選択肢を読み込んでいます。
プルダウンで選択することで、次の選択肢が表示されるように作成したのですが
市町村選択からの次の選択肢を選ぶ形で作成しておりましたが、
市町村の上に都道府県を追加し、
都道府県を選択→絞り込まれた市町村を選択→店舗 と3段階で選択肢を表示できるようにしたいのですが
どなたかご教授いただけますよう、よろしくお願いいたします。
script部分を追加し、変数名を変えただけでは、動きませんでした。
該当のソースコード
sentaku.php
----追加したい部分-----
<label>都道府県選択</label> <select class="form-control change_area" name="change_area" id="change_area"> <?php foreach($area_list as $area){ ?> <option value="<?php echo $area["area_id"];?>"><?php echo $area["area_name"];?></option> <?php }?> </select>
----追加したい部分-----
----現状部分----
<label>市町村選択</label> <select class="form-control change_city" name="change_city"> <?php foreach($city_list as $city){ ?> <option value="<?php echo $city["city_id"];?>"><?php echo $city["city_name"];?></option> <?php } ?> </select> <label>店舗選択</label> <select class="form-control change_shop" name="mail_class"> <option value="">店舗を指定しない</option> </select> /*都道府県用に追記した部分*/ <script> $(function () { $.ajax({ url: "area.php", type: "POST", dataType: 'json', data: { city_id: $(".change_area").val(), mode: "mail" } }) .done(function(data){ $('.change_city option').remove(); $.each(data, function(id, name){ $('.change_city ').append($('<option>').text(name).attr('value', id)); }); }); $('.change_city').on('change', function(){ $.ajax({ url: "area.php", type: "POST", dataType: 'json', data: { school_id: $(".change_area").val(), mode: "mail" } }) .done(function(data){ $('.change_city option').remove(); $.each(data, function(id, name){ $('.change_city ').append($('<option>').text(name).attr('value', id)); }); }); }); }); </script> /*都道府県用に追記した部分*/ <script> $(function () { $.ajax({ url: "shop.php", type: "POST", dataType: 'json', data: { city_id: $(".change_city").val(), mode: "mail" } }) .done(function(data, textStatus, jqXHR){ $('.change_shop option').remove(); $.each(data, function(id, name){ $('.change_shop').append($('<option>').text(name).attr('value', id)); }).fail(function(jqXHR, textStatus, errorThrown){ // エラーの場合処理 $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status); }); }); $('.change_city').on('change', function(){ $.ajax({ url: "shop.php", type: "POST", dataType: 'json', data: { school_id: $(".change_city").val(), mode: "mail" } }) .done(function(data, textStatus, jqXHR){ $('.change_shop option').remove(); $.each(data, function(id, name){ $('.change_shop ').append($('<option>').text(name).attr('value', id)); }).fail(function(jqXHR, textStatus, errorThrown){ // エラーの場合処理 $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status); }); }); </script>
市町村用の元々あった shop.php
//Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出 $school_id = $_POST['shop_id']; $mode = "none"; if( isset($_POST['mode']) ) $mode = $_POST['mode']; $db = new db_master(); $class_list = $db->select("table名", array(), "city_id=\"" . $city_id . "\" ORDER BY shop_name ASC", "multi"); //抽出された値を $model_list配列 に格納 $model_list = array(); if($mode == "none") $model_list[0] = "選択してください"; else if($mode == "mail") $model_list[0] = "店舗を指定しない"; foreach($class_list as $key => $value) { $model_list[$value["class_id"]] = $value["class_name"]; } header('Content-Type: application/json'); //json形式で index.php へバックする echo json_encode($model_list);
都道府県用に追加した area.php
//Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出 $school_id = $_POST['area_id']; $mode = "none"; if( isset($_POST['mode']) ) $mode = $_POST['mode']; $db = new db_master(); $class_list = $db->select("table名", array(), "area_id=\"" . $area_id. "\" ORDER BY area_name ASC", "multi"); //抽出された値を $model_list配列 に格納 $model_list = array(); if($mode == "none") $model_list[0] = "選択してください"; else if($mode == "mail") $model_list[0] = "店舗を指定しない"; foreach($class_list as $key => $value) { $model_list[$value["class_id"]] = $value["class_name"]; } header('Content-Type: application/json'); //json形式で index.php へバックする echo json_encode($model_list);
=現象=
追記したものを入れ込んでみましたが、単純に<script></script>部分をコピーし、変数部分を都道府県に合わせてみたのですが、返り値が戻ってこないのか、市町村選択も出来ない状態です。
=エラーの場合処理を追加=
上記/都道府県用に追記した部分/に、デバッグコードを追加してみましたが、何も表示されません。
=エラーの場合処理を修正=
上記/都道府県用に追記した部分/に、.fail(function(jqXHR, textStatus, errorThrown)が漏れておりました。
すいません
回答2件
あなたの回答
tips
プレビュー