コースのセレクトボックスの値を変更するajaxのコードについて
最終のコードは最下部に記述
$.ajax({
type: "GET",
url: "/course/course/search/",
data: jsondata,
dataType: "json"
}).then(function (course_dict) {
// 選択されている値を保持
selected_val = $('#id_update_course').val();
// コースプルダウンをクリア
$('#id_update_course').html('');
var first_option = $('<option></option>', {
'value': '',
});
first_option.text('---------');
$('#id_update_course').append(first_option);
// 先頭に空コース選択
course_dict.datas.forEach(function (course) {
var option = $('<option></option>', {
'value': course.id,
});
option.text(course.name);
$('#id_update_course').append(option);
});
// 選択されていた値を再設定
$('#id_update_course').val(selected_val);
}).fail(function () {
alert('コースの読み込みに失敗しました。')
});
解説
// 選択されている値を保持
selected_val = $('#id_update_course').val();
// 選択されていた値を再設定
$('#id_update_course').val(selected_val);
これは最初に適用開始日を選んでコースを選択して、再度選択した場合に同じコースがあればそのまま選択させておくことができる
もし選択していたコースがなければ消える。
選んだコースを他の日程でも存在する場合にそのまま表示させたい場合はこのコードが必要だが、もし毎回リセットさせるなら必要ない
解説
// コースプルダウンをクリア
$('#id_update_course').html('');
var first_option = $('<option></option>', {
'value': '',
});
first_option.text('---------');
$('#id_update_course').append(first_option);
上記は以下の様に省略もできる
// コースプルダウンをクリアし、初期オプションを追加
$('#id_update_course').html('<option value="">---------</option>');
最終のコード
最終的には最初に表示させている値を保存する必要がないので削除し、
流れとしては適用開始日が変更されたらコースのセレクトボックスの値を初期化し、繰り返し処理を行って適用開始日に連動するコースを表示させるだけにしている。
// コースプルダウンのリロード
const reload_courses = function (begin_date, end_date) {
const jsondata = {
'begin_date': begin_date,
'end_date': end_date
}
$.ajax({
type: "GET",
url: "/course/course/search/",
data: jsondata,
dataType: "json"
}).then(function (course_dict) {
// コースプルダウンをクリア
$('#id_update_course').html('<option value="">---------</option>');
// 先頭に空コース選択
course_dict.datas.forEach(function (course) {
$('#id_update_course').append($('<option>', {
value: course.id,
text: course.name
}));
});
}).fail(function () {
alert('コースの読み込みに失敗しました。')
});
}
// 適用開始日または適用終了日変更イベント
$('#id_update_begin_date').change(function () {
reload_courses(
$('#id_update_begin_date').val(),
$('#id_update_end_date').val()
);
});